@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
:root{--blue-500:#3B82F6;--blue-600:#2563EB;--blue-700:#1D4ED8;--purple-500:#8B5CF6;--purple-600:#7C3AED;--emerald-500:#10B981;--emerald-600:#059669;--red-500:#EF4444;--amber-500:#F59E0B;--cyan-500:#06B6D4;--pink-500:#EC4899;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;--bg-alpha:rgba(255,255,255,0.4);--border-color:rgba(0,0,0,0.06);--text-color:var(--gray-800)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:transparent}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:var(--gray-800)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* PANEL SHELL */
.orbit-panel{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,0.55);backdrop-filter:blur(50px) saturate(200%);-webkit-backdrop-filter:blur(50px) saturate(200%);border-radius:24px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.4)}

/* AUTH */
.auth-overlay{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(255,255,255,0.2);backdrop-filter:blur(50px) saturate(200%);-webkit-backdrop-filter:blur(50px) saturate(200%);border-radius:24px;padding:40px;text-align:center}
.auth-overlay.hidden{display:none}
.auth-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 24px rgba(59,130,246,.35)}
.auth-title{font-size:22px;font-weight:800;color:var(--gray-900)}
.auth-subtitle{font-size:13px;color:var(--gray-500);max-width:260px;line-height:1.5}
.auth-btn{margin-top:8px;padding:12px 32px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px rgba(59,130,246,.35);transition:all .2s}
.auth-btn:hover{box-shadow:0 6px 20px rgba(59,130,246,.5);transform:translateY(-1px)}
.auth-error{font-size:12px;color:var(--red-500);min-height:18px}

/* TAB BAR */
.tab-bar{display:flex;gap:2px;padding:8px 12px 0;flex-shrink:0;background:rgba(0,0,0,.02)}
.tab-btn{flex:1;padding:10px;border:none;border-radius:12px 12px 0 0;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .2s}

.tab-btn:hover:not(.active){color:var(--gray-700)}

/* WINDOW CONTROLS */
.win-controls{display:flex;align-items:center;gap:0;padding:4px 6px 0;flex-shrink:0;justify-content:flex-end;background:transparent}
.win-btn{width:32px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:11px;color:var(--gray-500);cursor:pointer;transition:all .12s;font-family:inherit;border-radius:4px}
.win-btn:hover{background:rgba(0,0,0,.08);color:var(--gray-800)}
.win-close:hover{background:#E81123;color:#fff}
.win-maximize.is-full{font-size:10px}


/* VIEW PANELS */
.view-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.view-panel.hidden{display:none}

/* HEADER */
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;flex-shrink:0;background:transparent}
.header-left{display:flex;align-items:center;gap:10px}
.header-logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.header-title{font-size:15px;font-weight:700;color:var(--gray-900)}
.header-subtitle{font-size:11px;color:var(--gray-400);margin-top:1px}
.header-right{display:flex;align-items:center;gap:8px}
.user-badge{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:20px;background:rgba(255,255,255,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}
.user-badge-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}
.user-badge-name{font-size:12px;font-weight:600;color:var(--blue-600)}
.badge-admin{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);color:var(--blue-600)}
.btn-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:transparent;color:var(--gray-400);font-size:13px;cursor:pointer;transition:all .15s}
.btn-icon:hover{background:rgba(0,0,0,.05);color:var(--gray-600)}
.divider{height:1px;margin:0 16px;background:rgba(255,255,255,.12);flex-shrink:0}

/* SCROLL BODY */
.scroll-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.scroll-body::-webkit-scrollbar{width:4px}
.scroll-body::-webkit-scrollbar-track{background:transparent}
.scroll-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}

/* STATUS */
.status-bar{display:none;align-items:center;gap:8px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,0.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);font-size:11px;color:var(--blue-600);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.status-bar.visible{display:flex}

/* SHARED */
.sec-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);display:flex;align-items:center;gap:5px;margin-bottom:6px}
.stack{display:flex;flex-direction:column;gap:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flex-row{display:flex;align-items:center}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}
.text-xs{font-size:11px}
.mono{font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.blue{background:linear-gradient(135deg,var(--blue-500),var(--blue-600))}
.dot.purple{background:linear-gradient(135deg,var(--purple-500),var(--purple-600))}

/* SEGMENTED CTRL */
.seg-ctrl{display:flex;background:rgba(255,255,255,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;padding:3px;border:1px solid rgba(255,255,255,0.1)}
.seg-ctrl.seg-sm{padding:2px}
.seg-btn{flex:1;padding:9px 10px;font-family:inherit;font-size:12px;font-weight:600;border:none;border-radius:18px;background:transparent;color:var(--gray-500);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.seg-btn:hover{color:var(--gray-700)}
.seg-btn.active{background:rgba(255,255,255,.5);color:var(--gray-900);box-shadow:0 2px 10px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg-sm .seg-btn{padding:6px 10px;font-size:11px}

/* TOAST NOTIFICATION */
.orbit-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 20px;border-radius:14px;background:rgba(30,41,59,0.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:#F1F5F9;font-family:inherit;font-size:12px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);z-index:9999;opacity:0;transition:all .4s cubic-bezier(.16,1,.3,1);max-width:340px;text-align:center;line-height:1.4}
.orbit-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* FIELD INPUT */
.fgroup{display:flex;flex-direction:column;gap:5px}
.flabel{font-size:11px;font-weight:600;color:var(--gray-600);display:flex;align-items:center;gap:4px}
.finput-wrap{position:relative}
.ficon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none;font-size:13px}
.finput{width:100%;padding:9px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--gray-900);background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:16px;outline:none;transition:all .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.finput::placeholder{color:var(--gray-400)}
.finput:focus{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 3px rgba(59,130,246,.12),inset 0 1px 0 rgba(255,255,255,.3);background:rgba(255,255,255,.55)}
.finput.ico{padding-left:34px}
.fhint{font-size:10px;color:var(--gray-400)}

/* CHANNEL SELECTOR ICON */
.ch-ico{margin-right:4px;font-size:13px}

/* ONLINE MODE NOTICE */
.online-notice{display:none;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:rgba(139,92,246,.08);color:var(--purple-600);font-size:11px;font-weight:500;border:1px solid rgba(139,92,246,.12)}
.online-notice.visible{display:flex}
.online-forced-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(139,92,246,.1);color:var(--purple-600);border:1px solid rgba(139,92,246,.15)}

/* CHANGE CONFIRMATION CARD */
.change-confirm-card{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(255,107,107,0.1);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,107,107,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(255,107,107,0.08);animation:confirmAppear .4s cubic-bezier(.16,1,.3,1)}
@keyframes confirmAppear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.change-confirm-amount{font-size:14px;font-weight:700;color:#DC2626;margin-bottom:10px;text-align:center}
.change-confirm-amount span{font-size:18px;font-weight:800;color:#B91C1C}
.change-confirm-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.25);border:1px solid rgba(255,107,107,0.12);transition:all .2s}
.change-confirm-check:hover{background:rgba(255,255,255,0.4);border-color:rgba(16,185,129,0.2)}
.change-confirm-check input[type="checkbox"]{width:18px;height:18px;accent-color:#10B981;flex-shrink:0;margin-top:1px;cursor:pointer}
.change-confirm-label{font-size:11px;font-weight:600;color:var(--gray-700);line-height:1.4}
.change-confirm-card.confirmed{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 12px rgba(16,185,129,0.1)}
.change-confirm-card.confirmed .change-confirm-amount{color:#059669}
.change-confirm-card.confirmed .change-confirm-amount span{color:#047857}

/* SESSION BLOCK */
.sess-block{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:all .3s}
.sess-block.flex-active{background:rgba(59,130,246,.05);border-color:rgba(59,130,246,.2)}
.sess-header{display:flex;align-items:center;justify-content:space-between}
.flex-notice{display:none;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:rgba(59,130,246,.08);color:var(--blue-600);font-size:11px;font-weight:500}
.flex-notice.visible{display:flex}

/* TOGGLE */
.atoggle{position:relative;width:40px;height:24px;border-radius:12px;background:rgba(0,0,0,.12);border:none;cursor:pointer;transition:background .25s;flex-shrink:0}
.atoggle.on{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));box-shadow:0 2px 8px rgba(59,130,246,.4)}
.atoggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.atoggle.on .atoggle-thumb{transform:translateX(16px)}

/* TIME GRID */
.tgrid{display:flex;flex-wrap:wrap;gap:5px}
.tslot{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);font-family:inherit;font-size:11px;font-weight:600;color:var(--gray-700);cursor:pointer;transition:all .15s}
.tslot:hover{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06)}
.tslot.selected{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.4);color:var(--blue-600);box-shadow:0 2px 8px rgba(59,130,246,.15)}
.tgrid-empty{font-size:11px;color:var(--gray-400);padding:8px 0}
.tgrid-loading{font-size:11px;color:var(--blue-500);display:flex;align-items:center;gap:6px}

/* PILLS */
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{padding:4px 10px;border-radius:16px;background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.15);color:var(--blue-500);font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.pill:hover{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3);transform:translateY(-1px)}
.pill.selected{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;border-color:transparent}

/* PAYMENT */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pay-btn{padding:12px;display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(255,255,255,.5);border:1.5px solid rgba(0,0,0,.08);border-radius:12px;cursor:pointer;transition:all .2s;font-family:inherit}
.pay-btn:hover{background:rgba(255,255,255,.8);border-color:rgba(59,130,246,.3)}
.pay-btn.active{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.4);box-shadow:0 4px 12px rgba(59,130,246,.15)}
.pay-ico{font-size:18px}.pay-lbl{font-size:11px;font-weight:600;color:var(--gray-700)}
.mod-cash,.mod-transfer{display:flex;flex-direction:column;gap:10px}
.mod-cash.hidden,.mod-transfer.hidden{display:none}
.change-box{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:10px}
.change-lbl{font-size:11px;font-weight:600;color:#047857;display:flex;align-items:center;gap:6px}
.change-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.change-val.pos{color:var(--emerald-600)}.change-val.neg{color:var(--red-500)}

/* DROPZONE */
.dropzone{border:2px dashed rgba(59,130,246,.25);border-radius:14px;background:rgba(59,130,246,.03);padding:20px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .2s;text-align:center}
.dropzone:hover,.dropzone.dragging{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.07)}
.dropzone-ico{width:40px;height:40px;border-radius:14px;background:rgba(59,130,246,.08);display:flex;align-items:center;justify-content:center;font-size:18px}
.dropzone-title{font-size:12px;font-weight:600;color:var(--gray-700)}
.dropzone-hint{font-size:10px;color:var(--gray-400)}
.file-done{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2)}
.file-done.hidden{display:none}
.file-check{color:var(--emerald-500);font-size:16px;font-weight:700}
.file-info{flex:1;min-width:0;font-size:12px;font-weight:600;color:#047857}
.file-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-sub{font-size:10px;color:var(--emerald-600);margin-top:2px;font-weight:500}
.file-rm{border:none;background:transparent;color:var(--gray-400);cursor:pointer;font-size:14px;padding:4px;transition:color .15s}
.file-rm:hover{color:var(--red-500)}

/* FOOTER */
.panel-footer{padding:8px 16px 16px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.btn-primary{width:100%;padding:12px;border:none;border-radius:16px;background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 18px rgba(59,130,246,.4);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-primary:hover{box-shadow:0 6px 20px rgba(59,130,246,.5);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-wa{width:100%;padding:10px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:rgba(37,211,102,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#16A34A;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-wa:hover{background:rgba(37,211,102,.28)}
.btn-wa.hidden{display:none}

/* EXPORT CHAT BUTTON */
.btn-export-chat{width:100%;padding:10px;border-radius:16px;border:1.5px solid rgba(139,92,246,.2);background:rgba(139,92,246,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#7C3AED;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-export-chat:hover{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.35);transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.15)}
.btn-export-chat:active{transform:scale(.97)}
.btn-export-chat:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-export-chat.exporting{background:rgba(139,92,246,.1);color:#6D28D9;pointer-events:none}
.export-progress{position:relative;width:100%;height:28px;border-radius:14px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.12);overflow:hidden}
.export-progress.hidden{display:none}
.export-progress-bar{height:100%;border-radius:14px;background:linear-gradient(90deg,#8B5CF6,#6366F1,#A78BFA);transition:width .4s ease;position:relative;overflow:hidden}
.export-progress-bar::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:progressShimmer 1.5s ease infinite}
.export-progress-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#7C3AED}
body.dark-mode .btn-export-chat{background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.15);color:#A78BFA}
body.dark-mode .btn-export-chat:hover{background:rgba(139,92,246,0.2)}

/* ═══════════════════════════════════════════ */
/* ANALYTICS — Blue-Gradient Modern Dashboard */
/* ═══════════════════════════════════════════ */

/* Hero Greeting */
.an-hero{padding:24px 20px 16px;background:linear-gradient(135deg,#3B82F6 0%,#6366F1 40%,#8B5CF6 70%,#A78BFA 100%);position:relative;overflow:hidden}
.an-hero::before{content:'';position:absolute;top:-60px;right:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 65%)}
.an-hero::after{content:'';position:absolute;bottom:-40px;left:20%;width:160px;height:80px;border-radius:50%;background:rgba(255,255,255,0.06);filter:blur(20px)}
.an-hero-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.an-hero-subtitle{font-size:11px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:.04em}
.an-hero-title{font-size:22px;font-weight:900;color:#fff;margin-top:4px;letter-spacing:.02em}
.an-hero-actions{display:flex;gap:6px}
.an-notif{width:34px;height:34px;border-radius:12px;border:none;background:rgba(255,255,255,0.15);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px)}
.an-notif:hover{background:rgba(255,255,255,0.25)}
.an-hero-desc{font-size:12px;color:rgba(255,255,255,0.65);margin-top:10px;line-height:1.5;position:relative;z-index:1}

/* Filter Pills */
.an-filters{display:flex;gap:8px;padding:12px 16px;flex-shrink:0;flex-wrap:wrap;align-items:center}
.an-pill-group{display:flex;gap:4px;background:rgba(0,0,0,.03);border-radius:12px;padding:3px}
.an-pill{padding:6px 14px;border:none;border-radius:10px;background:transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .25s}
.an-pill:hover{color:var(--gray-700)}
.an-pill.active{background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}

/* KPI Grid (4 cards in 2x2) */
.an-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-kpi{padding:16px;border-radius:16px;background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 16px rgba(0,0,0,.04);transition:all .3s;position:relative;overflow:hidden}
.an-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.an-kpi-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;color:#fff}
.an-kpi[data-accent="blue"] .an-kpi-icon{background:linear-gradient(135deg,#3B82F6,#2563EB)}
.an-kpi[data-accent="purple"] .an-kpi-icon{background:linear-gradient(135deg,#8B5CF6,#7C3AED)}
.an-kpi[data-accent="cyan"] .an-kpi-icon{background:linear-gradient(135deg,#06B6D4,#0891B2)}
.an-kpi[data-accent="rose"] .an-kpi-icon{background:linear-gradient(135deg,#F43F5E,#E11D48)}
.an-kpi-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:4px}
.an-kpi-value{font-size:20px;font-weight:800;color:var(--gray-900);font-variant-numeric:tabular-nums}

/* an-card — Universal Glass Card */
.an-card{padding:16px;border-radius:16px;background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.an-card-title{font-size:13px;font-weight:700;color:var(--gray-800)}
.an-card-sub{font-size:10px;color:var(--gray-400);margin-top:2px}

/* an-mini stat */
.an-mini{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.04);text-align:center}
.an-mini-label{font-size:9px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em}
.an-mini-val{font-size:16px;font-weight:800;color:var(--gray-800);margin-top:2px}

/* Export button in hero */
#viewAnalytics .btn-export{width:34px;height:34px;border-radius:12px;border:none;background:rgba(255,255,255,0.15);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px);padding:0}
#viewAnalytics .btn-export:hover{background:rgba(255,255,255,0.25)}

/* ANALYTICS FILTERS (legacy compat) */
.analytics-filters{display:flex;gap:8px;padding:8px 16px;flex-shrink:0;flex-wrap:wrap}

/* KPI HERO */
.kpi-hero{padding:16px;border-radius:18px;background:linear-gradient(135deg,#2563EB,#1D4ED8 50%,#1E40AF);box-shadow:0 8px 32px rgba(37,99,235,.35);position:relative;overflow:hidden;color:#fff}
.kpi-hero::after{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.kpi-hero-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.kpi-hero-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(191,219,254,.9)}
.kpi-hero-value{font-size:26px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi-hero-icon{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:16px}
.kpi-hero-delta{display:flex;align-items:center;gap:6px}
.kpi-hero-vs{font-size:11px;color:rgba(147,197,253,.8)}
.delta-up{font-size:11px;font-weight:600;color:#6EE7B7}
.delta-down{font-size:11px;font-weight:600;color:#FCA5A5}
.kpi-sub{padding:10px;border-radius:12px;background:rgba(255,255,255,.1)}
.kpi-sub-label{font-size:11px;color:rgba(191,219,254,.9);font-weight:500}
.kpi-sub-val{font-size:13px;font-weight:700;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums}

/* KPI CARDS */
.kpi-card{padding:14px;border-radius:16px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 20px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.25);transition:all .25s;display:flex;flex-direction:column;gap:4px}
.kpi-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-1px);background:rgba(255,255,255,0.5)}
.kpi-card.kpi-alert{background:rgba(254,242,242,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(239,68,68,.12)}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-label{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-400)}
.kpi-ico{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px}
.blue-bg{background:rgba(59,130,246,.12);backdrop-filter:blur(6px);border:1px solid rgba(59,130,246,.08)}.green-bg{background:rgba(16,185,129,.12);backdrop-filter:blur(6px);border:1px solid rgba(16,185,129,.08)}.purple-bg{background:rgba(139,92,246,.12);backdrop-filter:blur(6px);border:1px solid rgba(139,92,246,.08)}.wa-bg{background:rgba(37,211,102,.12);backdrop-filter:blur(6px);border:1px solid rgba(37,211,102,.08)}.red-bg{background:rgba(239,68,68,.12);backdrop-filter:blur(6px);border:1px solid rgba(239,68,68,.08)}.cyan-bg{background:rgba(6,182,212,.12);backdrop-filter:blur(6px);border:1px solid rgba(6,182,212,.08)}
.kpi-val{font-size:26px;font-weight:700;color:var(--gray-900);font-variant-numeric:tabular-nums}
.kpi-sub-text{font-size:10px;color:var(--gray-400)}

/* BAR CHART (progress bars) */
.bar-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;font-size:11px;color:var(--gray-600);font-weight:500}
.bar-pct{font-size:11px;font-weight:600;color:var(--gray-800);font-variant-numeric:tabular-nums}
.bar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.bar-fill.green{background:var(--emerald-500)}.bar-fill.blue{background:var(--blue-500)}

/* CHART CARDS */
.chart-card{padding:16px;border-radius:16px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 20px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.25)}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.chart-title{font-size:14px;font-weight:700;color:var(--gray-900)}
.chart-sub{font-size:10px;color:var(--gray-400);margin-top:2px}
.legend-txt{font-size:10px;color:var(--gray-500);font-weight:500}

/* CSS REVENUE CHART */
.css-chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:8px}
.css-chart-bar{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:flex-end;min-width:0}
.css-chart-bar .bar-lv{background:var(--blue-500);border-radius:3px 3px 0 0;width:100%;transition:height .4s ease}
.css-chart-bar .bar-bn{background:var(--purple-500);border-radius:3px 3px 0 0;width:100%;transition:height .4s ease}
.css-chart-bar .bar-date{font-size:8px;color:var(--gray-400);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}

/* CSS DAILY BARS */
.css-bars{display:flex;flex-direction:column;gap:8px}
.css-bars-row{display:flex;align-items:center;gap:8px}
.css-bars-label{width:50px;font-size:10px;color:var(--gray-500);font-weight:500;text-align:right;flex-shrink:0}
.css-bars-tracks{flex:1;display:flex;flex-direction:column;gap:3px}
.css-bars-track{height:10px;border-radius:5px;transition:width .5s ease}
.css-bars-track.lv{background:var(--blue-500)}.css-bars-track.bn{background:var(--purple-500)}

/* SESSION TYPE BARS */
.stype-row{display:flex;align-items:center;gap:8px}
.stype-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stype-name{font-size:11px;color:var(--gray-600);font-weight:500;flex:1}
.stype-val{font-size:11px;color:var(--gray-400);font-variant-numeric:tabular-nums;font-weight:600}
.stype-bar{flex:2;height:6px;border-radius:3px;background:var(--gray-100);overflow:hidden}
.stype-fill{height:100%;border-radius:3px;transition:width .5s ease}

/* TABLE */
.table-wrap{overflow-x:auto;font-size:11px}
.table-wrap table{width:100%;border-collapse:collapse;min-width:500px}
.table-wrap th{padding:8px 10px;text-align:left;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);background:rgba(255,255,255,.2);white-space:nowrap;cursor:pointer;user-select:none}
.table-wrap td{padding:8px 10px;white-space:nowrap;border-top:1px solid rgba(0,0,0,.03)}
.table-wrap tr:hover td{background:rgba(59,130,246,.03)}
.t-name{font-weight:600;color:var(--gray-800)}.t-phone{font-size:10px;color:var(--gray-400)}
.t-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
.t-badge.confirmed{background:rgba(59,130,246,.1);color:var(--blue-600)}
.t-badge.pending{background:rgba(245,158,11,.1);color:#D97706}
.t-badge.completed{background:rgba(16,185,129,.1);color:var(--emerald-600)}
.t-badge.cancelled{background:rgba(239,68,68,.1);color:var(--red-500)}
.t-amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--gray-900)}

/* SPINNER */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
.spinner-blue{border-color:rgba(59,130,246,.2);border-top-color:var(--blue-500)}
@keyframes spin{to{transform:rotate(360deg)}}

/* PIN AUTH FORM */
.auth-form{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:240px}
.pin-dots{display:flex;gap:8px;justify-content:center}
.pin-dot{width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,.1);transition:all .2s}
.pin-dot.filled{background:linear-gradient(135deg,#3B82F6,#2563EB);box-shadow:0 2px 6px rgba(59,130,246,.4)}
.pin-input{width:180px;text-align:center;padding:10px;font-size:20px;letter-spacing:12px;font-family:inherit;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);outline:none;color:var(--gray-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pin-input:focus{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.pin-error{font-size:12px;color:#EF4444;min-height:18px}

/* FICON TEXT (RD$ prefix) */
.ficon-text{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:var(--gray-400);pointer-events:none}
.finput.ico-text{padding-left:38px}

/* EXPORT BUTTON */
.btn-export{padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:inherit;font-size:11px;font-weight:600;color:var(--gray-700);cursor:pointer;transition:background .2s ease;white-space:nowrap}
.btn-export:hover{background:rgba(255,255,255,0.5)}

/* FILTER TIMESTAMP */
.filter-timestamp{font-size:10px;color:var(--gray-400);margin-left:4px;white-space:nowrap}

/* DOT SQUARE (bar chart legend) */
.dot-sq{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.dot-sq.blue{background:var(--blue-500)}
.dot-sq.purple{background:var(--purple-500)}

/* TABLE CARD */
.table-card{padding:0!important;overflow:hidden}
.table-header{padding:16px 16px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid rgba(0,0,0,.04)}
.table-search-wrap{position:relative}
.table-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none}
.table-search{padding:8px 12px 8px 30px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--gray-700);border-radius:12px;border:1px solid rgba(0,0,0,.07);background:rgba(255,255,255,.6);outline:none;width:200px;transition:all .2s}
.table-search:focus{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 3px rgba(59,130,246,.1);background:rgba(255,255,255,.8)}
.table-search::placeholder{color:var(--gray-400)}

/* TABLE SORT ICONS */
.sort-arrows{display:inline-flex;flex-direction:column;margin-left:2px;line-height:1}
.sort-arrows span{font-size:8px;line-height:8px;color:var(--gray-300)}
.sort-arrows span.active{color:var(--blue-500)}

/* TABLE ROW ACTIONS */
.row-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s}
tr:hover .row-actions{opacity:1}
.act-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:12px;transition:all .15s;color:var(--gray-400)}
.act-btn:hover{background:rgba(59,130,246,.08)}
.act-btn.act-view:hover{color:var(--blue-500)}
.act-btn.act-wa:hover{color:#16A34A;background:rgba(37,211,102,.08)}
.act-btn.act-del:hover{color:var(--red-500);background:rgba(239,68,68,.08)}

/* TABLE PAGINATION */
.table-pagination{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gray-400)}
.table-pagination:empty{display:none}
.table-pagination .page-info span{font-weight:600;color:var(--gray-700)}
.page-btns{display:flex;align-items:center;gap:3px}
.page-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .15s}
.page-btn:hover{color:var(--blue-600);background:rgba(59,130,246,.08)}
.page-btn:disabled{opacity:.3;cursor:not-allowed}
.page-btn.current{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;box-shadow:0 2px 6px rgba(59,130,246,.3)}

/* TABLE EMPTY STATE */
.table-empty{padding:40px 16px;text-align:center}
.table-empty-ico{width:40px;height:40px;border-radius:14px;background:rgba(59,130,246,.08);display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px}
.table-empty p{font-size:12px;color:var(--gray-600);font-weight:600}
.table-empty .hint{font-size:10px;color:var(--gray-400);font-weight:400;margin-top:2px}

/* LIQUID GLASS READABILITY */
.header-title,.auth-title,.kpi-val,.chart-title,.city-name,.donut-total{color:var(--gray-900);font-weight:700}
.kpi-label,.sec-label,.chart-sub,.legend-txt,.flabel{color:var(--gray-500)}
.finput,.pin-input{color:var(--gray-900)}

/* BENTO GRID */
.kpi-bento{display:flex;flex-direction:column;gap:12px}

/* KPI SPARKLINE */
.kpi-sparkline{display:flex;align-items:flex-end;gap:2px;height:32px;margin-top:10px;opacity:.6}
.kpi-sparkline .spark-bar{flex:1;border-radius:2px;background:rgba(255,255,255,.35);transition:height .3s ease;min-width:0}
.kpi-sparkline-mini{display:flex;align-items:flex-end;gap:1px;height:20px;margin:4px 0;opacity:.5}
.kpi-sparkline-mini .spark-bar{flex:1;border-radius:1.5px;background:var(--blue-500);transition:height .3s ease;min-width:0}
.kpi-alert .kpi-sparkline-mini .spark-bar{background:var(--red-500)}

/* KPI MINI */
.kpi-mini{padding:10px;gap:2px}
.kpi-mini .kpi-label{font-size:9px}
.kpi-mini .kpi-val{font-size:18px}

/* DONUT CHART */
.donut-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px}
.donut-wrap{position:relative;width:100px;height:100px;margin:4px 0}
.donut-svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:10}
.donut-seg{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-total{font-size:22px;font-weight:800;color:var(--gray-900)}
.donut-label{font-size:9px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.donut-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.donut-legend-item{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--gray-500);font-weight:500}
.donut-legend-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* CITY BARS */
.city-card{display:flex;flex-direction:column;gap:8px}
.city-bars{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.city-row{display:flex;align-items:center;gap:8px}
.city-flag{font-size:14px;flex-shrink:0}
.city-info{flex:1;display:flex;flex-direction:column;gap:3px}
.city-name{font-size:11px;font-weight:600;color:var(--gray-800)}
.city-bar-wrap{height:8px;border-radius:4px;background:rgba(0,0,0,.04);overflow:hidden;width:100%}
.city-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.city-bar-fill.lv{background:linear-gradient(90deg,#3B82F6,#2563EB)}
.city-bar-fill.bn{background:linear-gradient(90deg,#8B5CF6,#7C3AED)}
.city-stats{text-align:right;flex-shrink:0}
.city-count{font-size:13px;font-weight:700;color:var(--gray-900);font-variant-numeric:tabular-nums}
.city-pct{font-size:9px;color:var(--gray-400);font-weight:600}

/* FILTER TIMESTAMP */
.filter-timestamp{font-size:9px;color:var(--gray-400);font-weight:500}

/* TABLE HEADER */
.table-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.table-search-wrap{position:relative;flex-shrink:0}
.table-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:11px;pointer-events:none}
.table-search{padding:6px 10px 6px 26px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:rgba(255,255,255,.35);backdrop-filter:blur(8px);font-family:inherit;font-size:11px;color:var(--gray-800);outline:none;width:180px;transition:all .2s}
.table-search:focus{border-color:rgba(59,130,246,.4);box-shadow:0 0 0 3px rgba(59,130,246,.1);width:220px}
.table-card{overflow:hidden}

/* SORT ARROWS */
.sort-arrows{display:inline-flex;flex-direction:column;margin-left:3px;font-size:7px;line-height:1;vertical-align:middle;opacity:.4}
.sort-arrows .active{opacity:1;color:var(--blue-500)}

/* ROW ACTIONS */
.row-actions{display:flex;gap:2px}
.act-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;cursor:pointer;font-size:11px;transition:all .15s}
.act-btn:hover{background:rgba(0,0,0,.06)}
.act-btn.act-view:hover{background:rgba(59,130,246,.1)}
.act-btn.act-wa:hover{background:rgba(37,211,102,.1)}
.act-btn.act-del:hover{background:rgba(239,68,68,.1)}

/* PAGINATION */
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;border-top:1px solid rgba(0,0,0,.04);margin-top:8px}
.page-info{font-size:10px;color:var(--gray-400);font-weight:500}
.page-info span{font-weight:700;color:var(--gray-600)}
.page-btns{display:flex;gap:3px}
.page-btn{min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.06);border-radius:8px;background:rgba(255,255,255,.5);font-family:inherit;font-size:10px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .15s}
.page-btn:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2)}
.page-btn.current{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.page-btn:disabled{opacity:.3;cursor:not-allowed}

/* TABLE EMPTY */
.table-empty{text-align:center;padding:30px 20px;color:var(--gray-400)}
.table-empty-ico{font-size:28px;margin-bottom:8px}
.table-empty p{font-size:12px;font-weight:500}
.table-empty .hint{font-size:10px;color:var(--gray-300);margin-top:4px}

/* DOT SQUARE (for legends) */
.dot-sq{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.dot-sq.blue{background:var(--blue-500)}.dot-sq.purple{background:var(--purple-500)}

/* KPI SPARK CARD */
.kpi-spark-card{position:relative;overflow:hidden}

/* NUMPAD */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:220px}
.numpad-key{height:48px;border:none;border-radius:16px;background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);font-family:inherit;font-size:20px;font-weight:600;color:var(--gray-800);cursor:pointer;transition:background .15s ease,transform .1s ease;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.numpad-key:active{background:rgba(255,255,255,0.55);transform:scale(.95)}
.numpad-key:hover{background:rgba(255,255,255,0.5)}
.numpad-empty{background:transparent!important;border:none!important;box-shadow:none!important;cursor:default}
.numpad-del{font-size:22px;color:var(--gray-500)}

/* PIN SHAKE */
@keyframes pinShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-shake .pin-dots{animation:pinShake .4s ease}
.pin-shake .pin-dot.filled{background:linear-gradient(135deg,#EF4444,#DC2626)!important;box-shadow:0 2px 6px rgba(239,68,68,.4)!important}

/* PROFILE SELECTOR */
.profile-overlay{position:absolute;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:rgba(255,255,255,0.2);backdrop-filter:blur(50px) saturate(200%);-webkit-backdrop-filter:blur(50px) saturate(200%);border-radius:24px;padding:40px;text-align:center}
.profile-overlay.hidden{display:none}
.profile-title{font-size:20px;font-weight:800;color:var(--gray-900)}
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:260px}
.profile-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:20px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.profile-card:hover{background:rgba(255,255,255,0.6);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35)}
.profile-card:active{transform:scale(.97)}
.profile-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.3);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.profile-avatar-placeholder{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gray-300),var(--gray-400));display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid rgba(255,255,255,0.3)}
.profile-name{font-size:13px;font-weight:700;color:var(--gray-800)}
.profile-role{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-400)}
.profile-back{border:none;background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;padding:8px 20px;font-family:inherit;font-size:12px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:background .2s;border:1px solid rgba(255,255,255,0.1)}
.profile-back:hover{background:rgba(255,255,255,0.5)}

/* HEADER AVATAR */
.header-user-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,0.3)}

/* LOGOUT BTN */
.btn-logout{border:none;background:transparent;color:var(--gray-400);font-size:12px;cursor:pointer;padding:4px;border-radius:8px;transition:all .15s}
.btn-logout:hover{color:var(--red-500);background:rgba(239,68,68,.08)}

/* AUDIT LOG CARD */
.audit-card{max-height:200px;overflow-y:auto}
.audit-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:10px}
.audit-row:last-child{border-bottom:none}
.audit-user{font-weight:600;color:var(--gray-800);min-width:60px}
.audit-role{font-size:9px;padding:1px 6px;border-radius:8px;font-weight:600}
.audit-role.admin{background:rgba(59,130,246,.1);color:var(--blue-600)}
.audit-role.standard{background:rgba(139,92,246,.1);color:var(--purple-600)}
.audit-role.guest{background:rgba(156,163,175,.1);color:var(--gray-500)}
.audit-time{color:var(--gray-400);margin-left:auto;font-variant-numeric:tabular-nums}

/* NAV PILL HOVER */



/* SR-ONLY (screen reader only) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* CITAS LIST */
.citas-list{display:flex;flex-direction:column;gap:8px;padding:12px 16px}
.cita-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;transition:all .2s}
.cita-card:hover{background:rgba(255,255,255,0.55);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.3)}
.cita-card:active{transform:scale(.98)}
.cita-date-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;flex-shrink:0}
.cita-date-day{font-size:16px;font-weight:800;line-height:1}
.cita-date-month{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.8}
.cita-info{flex:1;min-width:0}
.cita-client{font-size:12px;font-weight:700;color:var(--gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cita-meta{font-size:10px;color:var(--gray-400);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.cita-tag{font-size:9px;font-weight:600;padding:2px 8px;border-radius:10px;flex-shrink:0}
.cita-tag.paid{background:rgba(16,185,129,.1);color:var(--emerald-600)}
.cita-tag.pending{background:rgba(245,158,11,.1);color:#D97706}
.cita-tag.cancelled{background:rgba(239,68,68,.1);color:var(--red-500)}
.cita-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.cita-find-btn{width:28px;height:28px;border-radius:10px;border:1px solid rgba(59,130,246,.12);background:rgba(59,130,246,.06);color:var(--blue-500);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}
.cita-find-btn:hover{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.25);transform:scale(1.1);box-shadow:0 2px 8px rgba(59,130,246,.2)}

/* CITA MODAL */
.cita-modal{position:absolute;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.cita-modal.hidden{display:none}
.cita-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.25);border-radius:24px}
/* FIX SANDBOX: fondo casi opaco (antes 0.55) — la lista de atrás se
   transparentaba y se leía un "texto fantasma" detrás del modal */
.cita-modal-content{position:relative;z-index:1;width:100%;max-height:80%;border-radius:20px 20px 0 0;background:rgba(255,255,255,0.96);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,0.15);border-bottom:none;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 32px rgba(0,0,0,.12)}
.cita-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
/* FIX SANDBOX: min-height evita que la tarjeta Smash Cake aplaste las Smart
   Alerts hasta hacerlas ilegibles; overflow-x mata el scrollbar horizontal */
.cita-modal-body{flex:1;min-height:150px;overflow-y:auto;overflow-x:hidden;padding:12px 16px;font-size:12px;color:var(--gray-700);display:flex;flex-direction:column;gap:8px}
.cita-modal-body .cita-detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cita-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--gray-400);letter-spacing:.03em}
.cita-detail-value{font-size:12px;font-weight:600;color:var(--gray-800);text-align:right;max-width:60%;word-break:break-word;overflow-wrap:anywhere}
.cita-modal-actions{display:flex;gap:8px;padding:12px 16px 16px}
.cita-modal-actions .btn-wa{flex:1}.cita-modal-actions .btn-primary{flex:1}

/* GALLERY MANAGEMENT PANEL */
.gallery-panel{margin:0 16px 8px;padding:14px;border-radius:16px;background:rgba(139,92,246,0.04);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(139,92,246,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.gallery-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(139,92,246,0.1)}
.gallery-icon{font-size:18px}
.gallery-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7C3AED;flex:1}
.gallery-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.03)}
.gallery-row:last-child{border-bottom:none}
.gallery-row-info{display:flex;align-items:center;gap:8px}
.gallery-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gallery-dot.base{background:linear-gradient(135deg,#3B82F6,#6366F1)}
.gallery-dot.selection{background:linear-gradient(135deg,#F59E0B,#D97706)}
.gallery-dot.retocadas{background:linear-gradient(135deg,#10B981,#059669)}
.gallery-row-label{font-size:11px;font-weight:600;color:var(--gray-700)}
.gallery-link{font-size:10px;font-weight:600;color:#6366F1;text-decoration:none;padding:4px 10px;border-radius:8px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.12);transition:all .2s}
.gallery-link:hover{background:rgba(99,102,241,.15)}
.gallery-link.none{color:var(--gray-400);background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.04);pointer-events:none}
.gallery-actions{display:flex;gap:6px}
.gallery-create-btn{padding:5px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.06);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s}
.gallery-create-btn.selection{background:rgba(245,158,11,.08);color:#D97706;border-color:rgba(245,158,11,.15)}
.gallery-create-btn.selection:hover{background:rgba(245,158,11,.18)}
.gallery-create-btn.retocadas{background:rgba(16,185,129,.08);color:#059669;border-color:rgba(16,185,129,.15)}
.gallery-create-btn.retocadas:hover{background:rgba(16,185,129,.18)}
.gallery-create-btn:disabled{opacity:.5;cursor:not-allowed}
.gallery-send-btn{padding:5px 10px;border-radius:10px;border:none;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;color:#fff}
.gallery-send-btn.selection{background:linear-gradient(135deg,#F59E0B,#D97706)}
.gallery-send-btn.retocadas{background:linear-gradient(135deg,#10B981,#059669)}
.gallery-send-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* SOPORTE */
.finput[rows]{font-family:inherit;line-height:1.5}

/* iOS 26 SLIDING PILL NAV */
.top-nav-wrap{padding:6px 10px;flex-shrink:0;background:rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.top-nav-track{position:relative;display:flex;align-items:center;background:rgba(0,0,0,0.06);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-radius:14px;padding:3px;border:1px solid rgba(255,255,255,0.12);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.top-nav-slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:11px;background:linear-gradient(135deg,rgba(255,255,255,0.65),rgba(255,255,255,0.45));backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:0 2px 10px rgba(0,0,0,.08),0 0 0 0.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.15);transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}
.nav-tab{position:relative;z-index:1;flex:1;padding:7px 6px;font-family:inherit;font-size:11px;font-weight:600;border:none;border-radius:11px;background:transparent;color:rgba(0,0,0,.4);cursor:pointer;transition:color .25s ease;white-space:nowrap;text-align:center}
.nav-tab.active{color:rgba(0,0,0,.85)}
.nav-tab:hover:not(.active){color:rgba(0,0,0,.6)}
.nav-admin{font-size:13px}
.nav-admin.hidden{display:none}

/* AUTH PROFILE-FIRST */
.auth-back{position:absolute;top:16px;left:16px;font-size:20px;color:var(--gray-500);cursor:pointer;border:none;background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;border:1px solid rgba(255,255,255,0.1)}
.auth-back:hover{background:rgba(255,255,255,0.5)}
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.3);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.profile-avatar-lg-placeholder{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--gray-300),var(--gray-400));display:flex;align-items:center;justify-content:center;font-size:28px;border:3px solid rgba(255,255,255,0.3)}

/* THEME TOGGLE BUTTON */
.win-theme{font-size:14px!important;line-height:1}

/* ═══ DARK MODE ═══ */
body.dark-mode{--gray-50:#1a1a2e;--gray-100:#16213e;--gray-200:#1e293b;--gray-300:#334155;--gray-400:#94a3b8;--gray-500:#cbd5e1;--gray-600:#e2e8f0;--gray-700:#f1f5f9;--gray-800:#f8fafc;--gray-900:#ffffff;--bg-alpha:rgba(255,255,255,0.06);--border-color:rgba(255,255,255,0.08);--text-color:rgba(255,255,255,0.85)}
body.dark-mode .orbit-panel{background:rgba(15,15,35,0.65);border-color:rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
body.dark-mode .auth-overlay,body.dark-mode #pinOverlay{background:rgba(10,10,30,0.85);backdrop-filter:blur(50px) saturate(150%)}
body.dark-mode .auth-title,body.dark-mode .auth-subtitle{color:rgba(255,255,255,.85)}
body.dark-mode .profile-card{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
body.dark-mode .profile-card:hover{background:rgba(255,255,255,0.12)}
body.dark-mode .profile-name{color:rgba(255,255,255,.9)}
body.dark-mode .profile-role{color:rgba(255,255,255,.4)}
body.dark-mode .numpad-key{background:rgba(255,255,255,0.08);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,0.06)}
body.dark-mode .numpad-key:hover{background:rgba(255,255,255,0.14)}
body.dark-mode .pin-dot{border-color:rgba(255,255,255,.2)}
body.dark-mode .pin-dot.filled{background:rgba(255,255,255,.8)}
body.dark-mode .top-nav-wrap{background:rgba(255,255,255,0.03)}
body.dark-mode .top-nav-track{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.06)}
body.dark-mode .top-nav-slider{background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.08));box-shadow:0 1px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)}
body.dark-mode .nav-tab{color:rgba(255,255,255,.35)}
body.dark-mode .nav-tab.active{color:rgba(255,255,255,.9)}
body.dark-mode .nav-tab:hover:not(.active){color:rgba(255,255,255,.55)}
body.dark-mode .panel-header{border-color:rgba(255,255,255,.06)}
body.dark-mode .header-title{color:rgba(255,255,255,.9)}
body.dark-mode .header-subtitle{color:rgba(255,255,255,.4)}
body.dark-mode .scroll-body{background:transparent}
body.dark-mode .chart-card,body.dark-mode .kpi-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body.dark-mode .chart-title{color:rgba(255,255,255,.85)}
body.dark-mode .chart-sub{color:rgba(255,255,255,.4)}
body.dark-mode .flabel{color:rgba(255,255,255,.6)}
body.dark-mode .finput,body.dark-mode .finput-select{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,.85)}
body.dark-mode .finput::placeholder{color:rgba(255,255,255,.25)}
body.dark-mode .seg-btn{background:rgba(255,255,255,0.06);color:rgba(255,255,255,.5);border-color:rgba(255,255,255,0.06)}
body.dark-mode .seg-btn.active{background:rgba(59,130,246,0.2);color:#60a5fa}
body.dark-mode .btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
body.dark-mode .btn-wa{background:rgba(37,211,102,0.15);color:#4ade80;border-color:rgba(37,211,102,0.2)}
body.dark-mode .btn-export{background:rgba(255,255,255,0.06);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,0.08)}
body.dark-mode .win-btn{color:rgba(255,255,255,.4)}
body.dark-mode .win-btn:hover{background:rgba(255,255,255,0.08)}
body.dark-mode .cita-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.06)}
body.dark-mode .cita-card:hover{background:rgba(255,255,255,0.1)}
body.dark-mode .cita-client{color:rgba(255,255,255,.85)}
body.dark-mode .cita-meta{color:rgba(255,255,255,.4)}
body.dark-mode .cita-modal-content{background:rgba(20,20,40,0.97);border-color:rgba(255,255,255,0.08)}
body.dark-mode .cita-detail-label{color:rgba(255,255,255,.4)}
body.dark-mode .cita-detail-value{color:rgba(255,255,255,.85)}
body.dark-mode .kpi-value{color:rgba(255,255,255,.9)}
body.dark-mode .kpi-label{color:rgba(255,255,255,.4)}

/* NAV BADGE */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#EF4444;color:#fff;font-size:9px;font-weight:700;margin-left:4px;line-height:1}
.nav-badge.hidden{display:none}

/* NEXT UP BANNER */
.citas-next-up{display:flex;align-items:center;gap:10px;margin:8px 12px;padding:10px 14px;background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(139,92,246,0.08));backdrop-filter:blur(8px);border-radius:14px;border:1px solid rgba(59,130,246,0.15)}
.next-up-icon{font-size:22px}
.next-up-info{flex:1;min-width:0}
.next-up-label{font-size:10px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px}
.next-up-detail{font-size:12px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-up-time{font-size:13px;font-weight:800;color:#3B82F6;white-space:nowrap}

/* SEARCH BAR */
.citas-search-wrap{position:relative;margin:6px 12px}
.citas-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none}
.citas-search{width:100%;padding:8px 12px 8px 34px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.35);backdrop-filter:blur(8px);font-size:12px;color:var(--gray-800);outline:none;transition:border-color .2s,background .2s;box-sizing:border-box}
.citas-search:focus{border-color:rgba(59,130,246,0.3);background:rgba(255,255,255,0.5)}
.citas-search::placeholder{color:var(--gray-400)}

/* FILTER PILLS */
.citas-filters{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px}
.citas-filters::-webkit-scrollbar{display:none}
.citas-filter-pill{flex-shrink:0;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.2);backdrop-filter:blur(6px);font-size:11px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .2s;white-space:nowrap}
.citas-filter-pill.active{background:rgba(59,130,246,0.15);color:#3B82F6;border-color:rgba(59,130,246,0.2)}
.citas-filter-pill:hover:not(.active){background:rgba(255,255,255,0.35)}

/* DARK MODE additions */
body.dark-mode .citas-next-up{background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(139,92,246,0.05));border-color:rgba(59,130,246,0.1)}
body.dark-mode .next-up-detail{color:rgba(255,255,255,.85)}
body.dark-mode .citas-search{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,.85)}
body.dark-mode .citas-search::placeholder{color:rgba(255,255,255,.25)}
body.dark-mode .citas-filter-pill{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.06);color:rgba(255,255,255,.4)}
body.dark-mode .citas-filter-pill.active{background:rgba(59,130,246,0.12);color:#60a5fa;border-color:rgba(59,130,246,0.15)}

/* ═══════════════════════════════════════════════════════════════ */
/* COUNTDOWN PROGRESS BAR (Flight Tracker / Emerald Liquid Glass) */
/* ═══════════════════════════════════════════════════════════════ */

.countdown-section{
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.countdown-labels{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}
.countdown-label-start,
.countdown-label-end{
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gray-400);
  padding:3px 8px;
  border-radius:8px;
  background:rgba(0,106,79,0.08);
  border:1px solid rgba(0,106,79,0.12);
}
.countdown-label-end{
  background:rgba(0,106,79,0.15);
  border-color:rgba(0,106,79,0.2);
  color:#006A4F;
}

/* Track */
.countdown-track{
  position:relative;
  height:6px;
  border-radius:3px;
  background:rgba(0,106,79,0.08);
  border:1px solid rgba(0,106,79,0.06);
  overflow:visible;
  margin:12px 0 10px;
}

/* Dotted segments background */
.countdown-segments{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px;
}
.countdown-seg-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(0,106,79,0.15);
  flex-shrink:0;
  transition:background .3s;
}
.countdown-seg-dot.filled{
  background:rgba(0,106,79,0.5);
}

/* Green fill */
.countdown-fill{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg,#006A4F,#10B981);
  box-shadow:0 0 8px rgba(0,106,79,0.3);
  transition:width .8s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.countdown-fill::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  animation:progressShimmer 2.5s ease-in-out infinite;
}
@keyframes progressShimmer{
  0%{left:-100%}
  100%{left:200%}
}

/* Glowing dot indicator */
.countdown-dot{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle,#10B981 30%,rgba(16,185,129,0.6) 70%);
  border:2px solid rgba(255,255,255,0.8);
  box-shadow:
    0 0 12px rgba(16,185,129,0.5),
    0 0 24px rgba(16,185,129,0.2);
  transition:left .8s cubic-bezier(.4,0,.2,1);
  z-index:2;
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 12px rgba(16,185,129,0.5),0 0 24px rgba(16,185,129,0.2);transform:translate(-50%,-50%) scale(1)}
  50%{box-shadow:0 0 18px rgba(16,185,129,0.7),0 0 36px rgba(16,185,129,0.3);transform:translate(-50%,-50%) scale(1.15)}
}

/* Countdown text */
.countdown-text{
  font-size:11px;
  font-weight:600;
  color:#006A4F;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.countdown-text .ct-days{
  font-size:16px;
  font-weight:800;
  color:#006A4F;
}
.countdown-text .ct-label{
  color:var(--gray-500);
  font-weight:500;
}

/* ═══ SMASH CAKE NEON MODE ═══ */
.countdown-section.smash-neon .countdown-track{
  background:rgba(0,212,255,0.06);
  border-color:rgba(0,212,255,0.12);
}
.countdown-section.smash-neon .countdown-fill{
  background:linear-gradient(90deg,#00D4FF,#06B6D4,#22D3EE);
  box-shadow:0 0 20px rgba(0,212,255,0.6),0 0 40px rgba(0,212,255,0.2);
}
.countdown-section.smash-neon .countdown-dot{
  background:radial-gradient(circle,#00D4FF 30%,rgba(0,212,255,0.5) 70%);
  box-shadow:
    0 0 16px rgba(0,212,255,0.7),
    0 0 32px rgba(0,212,255,0.3),
    0 0 48px rgba(0,212,255,0.15);
  animation:neonPulse 2s ease-in-out infinite;
}
.countdown-section.smash-neon .countdown-label-start,
.countdown-section.smash-neon .countdown-label-end{
  background:rgba(0,212,255,0.1);
  border-color:rgba(0,212,255,0.2);
  color:#06B6D4;
}
.countdown-section.smash-neon .countdown-text{
  color:#06B6D4;
}
.countdown-section.smash-neon .countdown-text .ct-days{
  color:#00D4FF;
  text-shadow:0 0 8px rgba(0,212,255,0.4);
}
.countdown-section.smash-neon .countdown-seg-dot.filled{
  background:rgba(0,212,255,0.6);
}
@keyframes neonPulse{
  0%,100%{box-shadow:0 0 16px rgba(0,212,255,0.7),0 0 32px rgba(0,212,255,0.3)}
  50%{box-shadow:0 0 24px rgba(0,212,255,0.9),0 0 48px rgba(0,212,255,0.4),0 0 64px rgba(0,212,255,0.15)}
}

/* ═══════════════════════════════════════ */
/* SMASH CAKE PROTOCOL CHECKPOINTS       */
/* ═══════════════════════════════════════ */

.smash-protocol{
  margin:0 16px 8px;
  padding:14px;
  border-radius:16px;
  background:rgba(0,212,255,0.04);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(0,212,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 20px rgba(0,212,255,0.06);
}
.smash-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,212,255,0.1);
}
.smash-icon{
  font-size:18px;
}
.smash-title{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#06B6D4;
  flex:1;
}
.smash-badge{
  font-size:8px;
  font-weight:700;
  padding:3px 8px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(6,182,212,0.2));
  color:#06B6D4;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid rgba(0,212,255,0.2);
  animation:neonPulse 3s ease-in-out infinite;
}

.smash-checkpoints{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.smash-checkpoint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.smash-cp-info{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.smash-cp-emoji{
  font-size:14px;
  flex-shrink:0;
}
.smash-cp-label{
  font-size:11px;
  font-weight:600;
  color:var(--gray-700);
  white-space:nowrap;
}

/* Toggle pill group (segmented control) */
.smash-toggle-group{
  display:flex;
  gap:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.2);
  flex-shrink:0;
}
.smash-pill{
  padding:5px 10px;
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  color:var(--gray-500);
}
.smash-pill:first-child{border-radius:9px 0 0 9px}
.smash-pill:last-child{border-radius:0 9px 9px 0}

/* Pending (red/gray) active state */
.smash-pill.pending.active{
  background:rgba(239,68,68,0.12);
  color:#EF4444;
  box-shadow:inset 0 0 0 1px rgba(239,68,68,0.2);
}

/* Done (green) active state */
.smash-pill.done.active{
  background:rgba(16,185,129,0.15);
  color:#059669;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,0.25);
}

.smash-pill:hover:not(.active){
  background:rgba(0,0,0,0.03);
}

/* Supplier selector */
.smash-supplier{
  padding-top:8px;
  border-top:1px solid rgba(0,212,255,0.08);
}
.smash-supplier-pills{
  display:flex;
  gap:6px;
}
.smash-supplier-pill{
  flex:1;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(6px);
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  color:var(--gray-500);
  cursor:pointer;
  transition:all .2s;
  text-align:center;
}
.smash-supplier-pill:hover{
  background:rgba(255,255,255,0.35);
}
.smash-supplier-pill.active{
  background:linear-gradient(135deg,rgba(255,104,3,0.15),rgba(254,175,110,0.2));
  color:#FF6803;
  border-color:rgba(255,104,3,0.25);
  box-shadow:0 2px 8px rgba(255,104,3,0.15);
}

/* Auto-save indicator */
.smash-save-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:10px;
  padding:5px;
  font-size:10px;
  font-weight:600;
  color:#059669;
  border-radius:8px;
  background:rgba(16,185,129,0.08);
  border:1px solid rgba(16,185,129,0.12);
  animation:fadeInUp .3s ease;
}
.smash-save-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#059669;
  color:#fff;
  font-size:8px;
  font-weight:800;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══ DARK MODE — Countdown & Smash ═══ */
body.dark-mode .countdown-section{border-color:rgba(255,255,255,.06)}
body.dark-mode .countdown-track{background:rgba(0,106,79,0.12);border-color:rgba(0,106,79,0.08)}
body.dark-mode .countdown-label-start{background:rgba(0,106,79,0.12);border-color:rgba(0,106,79,0.15);color:#6EE7B7}
body.dark-mode .countdown-label-end{background:rgba(0,106,79,0.2);border-color:rgba(0,106,79,0.25);color:#34D399}
body.dark-mode .countdown-text{color:#6EE7B7}
body.dark-mode .countdown-text .ct-days{color:#34D399}
body.dark-mode .smash-protocol{background:rgba(0,212,255,0.03);border-color:rgba(0,212,255,0.08)}
body.dark-mode .smash-title{color:#22D3EE}
body.dark-mode .smash-badge{color:#22D3EE;background:rgba(0,212,255,0.1);border-color:rgba(0,212,255,0.15)}
body.dark-mode .smash-cp-label{color:rgba(255,255,255,.7)}
body.dark-mode .smash-toggle-group{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06)}
body.dark-mode .smash-pill{color:rgba(255,255,255,.4)}
body.dark-mode .smash-pill.pending.active{background:rgba(239,68,68,0.12);color:#FCA5A5}
body.dark-mode .smash-pill.done.active{background:rgba(16,185,129,0.12);color:#6EE7B7}
body.dark-mode .smash-supplier-pill{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06);color:rgba(255,255,255,.4)}
body.dark-mode .smash-supplier-pill.active{background:rgba(255,104,3,0.12);color:#FEAF6E;border-color:rgba(255,104,3,0.2)}
body.dark-mode .smash-save-indicator{background:rgba(16,185,129,0.06);color:#6EE7B7;border-color:rgba(16,185,129,0.1)}

/* CITA CARD — Smash Cake highlight */
.cita-card.smash-highlight{
  border-color:rgba(0,212,255,0.2)!important;
  box-shadow:inset 0 1px 0 rgba(0,212,255,.08),0 0 12px rgba(0,212,255,0.08)!important;
}
.cita-card.smash-highlight .cita-date-badge{
  background:linear-gradient(135deg,#06B6D4,#0891B2)!important;
  box-shadow:0 0 12px rgba(0,212,255,0.3);
}
body.dark-mode .cita-card.smash-highlight{
  border-color:rgba(0,212,255,0.12)!important;
  box-shadow:inset 0 1px 0 rgba(0,212,255,.04),0 0 16px rgba(0,212,255,0.06)!important;
}

/* SMASH SET DETAILS */
.smash-details{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,212,255,0.1);display:flex;flex-direction:column;gap:8px}
.smash-section-label{font-size:10px;font-weight:700;color:rgba(6,182,212,0.8);letter-spacing:.03em;margin-top:4px}
.smash-swatches{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);background:radial-gradient(circle at 35% 35%,var(--sw),var(--sw2));cursor:pointer;transition:all .25s;box-shadow:inset 0 1px 2px rgba(255,255,255,0.3),0 2px 6px rgba(0,0,0,.08);position:relative}
.swatch:hover{transform:scale(1.15);box-shadow:inset 0 1px 2px rgba(255,255,255,0.3),0 4px 12px rgba(0,0,0,.15)}
.swatch.active{transform:scale(1.2);border-color:rgba(6,182,212,0.6);box-shadow:0 0 0 3px rgba(6,182,212,0.2),inset 0 1px 2px rgba(255,255,255,0.3),0 4px 12px rgba(0,0,0,.15)}
.swatch.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.swatch-other{background:rgba(255,255,255,0.15)!important;backdrop-filter:blur(8px);font-size:12px;font-weight:700;color:var(--gray-500);display:flex;align-items:center;justify-content:center;border-radius:14px;width:auto;padding:0 12px}
.swatch-other.active{color:#06B6D4;border-color:rgba(6,182,212,0.6)}
.smash-color-input{margin-top:4px;font-size:12px}
.smash-color-input.hidden{display:none}
.smash-obs{font-family:inherit;font-size:11px;line-height:1.5;resize:vertical;min-height:40px;border-radius:12px}
.smash-order-btn{width:100%;padding:10px;border-radius:14px;border:none;background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(245,158,11,.25);margin-top:6px}
.smash-order-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,158,11,.35)}
.smash-order-btn.hidden{display:none}

/* CITA TODAY highlight */
.cita-today{
  border-left:3px solid #FF6803!important;
}

/* SMART TIME PICKER */
.shift-selector{display:flex;gap:6px;margin-top:4px}
/* FIX contraste: modo claro = texto oscuro; modo oscuro = texto claro (overrides abajo) */
.shift-btn{flex:1;padding:10px 8px;border-radius:14px;border:1px solid rgba(51,65,85,0.15);background:rgba(255,255,255,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#475569;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.shift-btn:hover{background:rgba(59,130,246,0.06);color:#1e293b}
.shift-btn.active{background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(99,102,241,0.15));border-color:rgba(59,130,246,0.35);color:#1d4ed8;box-shadow:0 4px 16px rgba(59,130,246,.15)}
.shift-btn.active[data-shift="pm"]{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(234,88,12,0.15));border-color:rgba(245,158,11,0.35);color:#b45309;box-shadow:0 4px 16px rgba(245,158,11,.15)}
.shift-range{font-size:9px;opacity:.75;font-weight:500}
body.dark-mode .shift-btn{border-color:rgba(255,255,255,0.15);background:rgba(15,23,42,0.72);color:#e2e8f0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
body.dark-mode .shift-btn:hover{background:rgba(30,41,59,0.9);color:#ffffff}
body.dark-mode .shift-btn.active{color:#fff}
body.dark-mode .shift-btn.active[data-shift="pm"]{color:#fbbf24}
.shift-btn .shift-full{position:absolute;top:4px;right:6px;font-size:8px;font-weight:700;color:#EF4444;background:rgba(239,68,68,0.12);padding:1px 5px;border-radius:6px;letter-spacing:.03em}
.time-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;animation:slotsIn .3s ease}
.time-slots.hidden{display:none}
@keyframes slotsIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* FIX contraste: modo claro = texto oscuro legible; modo oscuro = texto claro brillante */
.time-slot{padding:10px 4px;border-radius:12px;border:1px solid rgba(51,65,85,0.15);background:rgba(255,255,255,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#334155;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center}
.time-slot:hover:not(.occupied){background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.3);color:#1e293b;transform:translateY(-1px)}
.time-slot.selected{background:linear-gradient(135deg,#3B82F6,#6366F1);border-color:rgba(99,102,241,0.5);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.3);transform:scale(1.04)}
.time-slot.occupied{background:rgba(100,116,139,0.06);border-color:rgba(100,116,139,0.1);color:#94a3b8;cursor:not-allowed;text-decoration:line-through;opacity:.6}
body.dark-mode .time-slot{border-color:rgba(255,255,255,0.15);background:rgba(15,23,42,0.72);color:#F8FAFC;text-shadow:0 1px 2px rgba(0,0,0,.4)}
body.dark-mode .time-slot:hover:not(.occupied){background:rgba(30,41,59,0.9);border-color:rgba(96,165,250,0.45);color:#ffffff}
body.dark-mode .time-slot.selected{color:#fff}
body.dark-mode .time-slot.occupied{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.05);color:#64748b}
.custom-time-wrap{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.15);animation:slotsIn .4s ease}
.custom-time-wrap.hidden{display:none}
.custom-time-label{font-size:11px;font-weight:600;color:#F59E0B;white-space:nowrap}
.custom-time-input{flex:1;font-size:12px;padding:6px 8px!important;border-radius:10px!important}

/* ANTI-ABANDONO MODAL */
.abandon-modal{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.abandon-modal.hidden{display:none}
.abandon-backdrop{position:absolute;inset:0;background:rgba(239,68,68,0.08);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-radius:24px}
.abandon-content{position:relative;z-index:1;width:85%;max-width:320px;padding:28px 24px;border-radius:20px;background:rgba(255,255,255,0.65);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:2px solid rgba(239,68,68,0.25);box-shadow:0 12px 40px rgba(239,68,68,.15),inset 0 1px 0 rgba(255,255,255,.6);text-align:center;animation:abandonIn .3s ease}
@keyframes abandonIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.abandon-icon{font-size:40px;margin-bottom:8px}
.abandon-title{font-size:16px;font-weight:900;color:#DC2626;letter-spacing:.04em;margin-bottom:8px}
.abandon-text{font-size:12px;color:var(--gray-600);line-height:1.5;margin-bottom:16px}
.abandon-actions{display:flex;flex-direction:column;gap:8px}
.abandon-btn-stay{padding:10px;border-radius:14px;border:none;background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.abandon-btn-stay:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.abandon-btn-force{padding:8px;border-radius:12px;border:1px solid rgba(239,68,68,.15);background:rgba(239,68,68,0.04);color:#DC2626;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;opacity:.6}
.abandon-btn-force:hover{opacity:1;background:rgba(239,68,68,0.1)}

/* SHIFT WARNING */
.shift-warning{position:absolute;top:8px;left:12px;right:12px;z-index:180;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(217,119,6,0.08));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(245,158,11,0.25);display:flex;align-items:center;gap:10px;animation:shiftSlide .4s ease;box-shadow:0 4px 16px rgba(245,158,11,.15)}
.shift-warning.hidden{display:none}
@keyframes shiftSlide{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.shift-warning-icon{font-size:20px}
.shift-warning-text{font-size:11px;font-weight:600;color:#92400E;line-height:1.4}

body.dark-mode .abandon-content{background:rgba(30,30,40,0.85);border-color:rgba(239,68,68,0.2)}
body.dark-mode .abandon-text{color:var(--gray-300)}
body.dark-mode .shift-warning{background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(217,119,6,0.04));border-color:rgba(245,158,11,0.15)}
body.dark-mode .shift-warning-text{color:#FBBF24}

/* LIVE SESSION GLOW */
.cita-card.live-session{border:1.5px solid rgba(46,213,115,0.35);box-shadow:0 0 18px rgba(46,213,115,0.25),inset 0 0 20px rgba(46,213,115,0.04);animation:liveSessionPulse 3s ease-in-out infinite}
@keyframes liveSessionPulse{0%,100%{box-shadow:0 0 18px rgba(46,213,115,0.25),inset 0 0 20px rgba(46,213,115,0.04)}50%{box-shadow:0 0 28px rgba(46,213,115,0.4),inset 0 0 24px rgba(46,213,115,0.06)}}
.live-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;background:rgba(46,213,115,0.15);color:#2ED573;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;animation:liveBlink 1.5s ease infinite}
.live-badge-dot{width:5px;height:5px;border-radius:50%;background:#2ED573;animation:liveBlink 1.5s ease infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* CHECK-IN BUTTONS */
.checkin-bar{display:flex;gap:6px;margin-top:6px;animation:slotsIn .3s ease}
.checkin-btn{flex:1;padding:7px 6px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#E2E8F0;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.checkin-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px)}
.checkin-btn.puntual{border-color:rgba(46,213,115,0.2);color:#2ED573}
.checkin-btn.puntual:hover{background:rgba(46,213,115,0.1);box-shadow:0 2px 8px rgba(46,213,115,.2)}
.checkin-btn.tarde{border-color:rgba(245,158,11,0.2);color:#F59E0B}
.checkin-btn.tarde:hover{background:rgba(245,158,11,0.1);box-shadow:0 2px 8px rgba(245,158,11,.2)}
.checkin-done{font-size:10px;font-weight:600;padding:6px 10px;border-radius:10px;text-align:center;margin-top:6px}
.checkin-done.was-puntual{background:rgba(46,213,115,0.08);color:#2ED573;border:1px solid rgba(46,213,115,0.15)}
.checkin-done.was-tarde{background:rgba(245,158,11,0.08);color:#F59E0B;border:1px solid rgba(245,158,11,0.15)}

/* POST-SESSION MODAL */
.post-session-modal{position:absolute;inset:0;z-index:210;display:flex;align-items:center;justify-content:center}
.post-session-modal.hidden{display:none}
.post-session-backdrop{position:absolute;inset:0;background:rgba(46,213,115,0.06);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-radius:24px}
.post-session-content{position:relative;z-index:1;width:88%;max-width:340px;padding:28px 22px;border-radius:22px;background:rgba(255,255,255,0.65);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);border:2px solid rgba(46,213,115,0.2);box-shadow:0 16px 48px rgba(46,213,115,.12),inset 0 1px 0 rgba(255,255,255,.6);text-align:center;animation:abandonIn .3s ease}
.post-session-icon{font-size:44px;margin-bottom:10px}
.post-session-title{font-size:17px;font-weight:900;color:#059669;letter-spacing:.03em;margin-bottom:6px}
.post-session-text{font-size:12px;color:var(--gray-600);line-height:1.5;margin-bottom:18px}
.post-session-text strong{color:#047857}
.post-session-actions{display:flex;flex-direction:column;gap:8px}
.post-session-btn-confirm{padding:12px;border-radius:14px;border:none;background:linear-gradient(135deg,#059669,#10B981);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(5,150,105,.3)}
.post-session-btn-confirm:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(5,150,105,.4)}
.post-session-btn-confirm:disabled{opacity:.5;cursor:wait}
.post-session-btn-skip{padding:8px;border-radius:12px;border:1px solid rgba(148,163,184,.15);background:rgba(148,163,184,0.04);color:var(--gray-500);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;opacity:.5}
.post-session-btn-skip:hover{opacity:.8;background:rgba(148,163,184,0.08)}

body.dark-mode .post-session-content{background:rgba(30,30,40,0.88);border-color:rgba(46,213,115,0.15)}
body.dark-mode .post-session-text{color:var(--gray-300)}
body.dark-mode .post-session-text strong{color:#34D399}

/* --- SMART SORTING BLOCKS --- */
.smart-block {
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--bg-alpha);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.smart-block.highlighted {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}
.smart-block-header {
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}
.smart-block.highlighted .smart-block-header {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}
.smart-block-list {
  display: flex;
  flex-direction: column;
}
.cita-btn-verify {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  width: 100%;
}
.cita-btn-verify:hover {
  background: rgba(16, 185, 129, 0.25);
}

/* --- UPSELL MODAL (Liquid Glass) --- */
.upsell-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.upsell-modal.hidden { display: none; }
.upsell-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.upsell-content {
  position: relative; width: 90%; max-width: 360px;
  background: rgba(30,41,59,0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden;
}
.upsell-header {
  padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.upsell-icon { font-size: 32px; margin-bottom: 8px; }
.upsell-title { font-size: 16px; font-weight: 700; color: #fff; }
.upsell-body { padding: 20px; }
.upsell-summary {
  margin-top: 16px; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 16px;
}
.upsell-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-300); margin-bottom: 8px; }
.upsell-row:last-child { margin-bottom: 0; }
.upsell-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 12px 0; }
.upsell-row.total { font-size: 16px; font-weight: 700; color: #fff; }
.upsell-actions { padding: 20px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 10px; }

/* ════════════════════════════════════════════════════════════ */
/* ANTIORBIT CREATIVE v2.0 — NEW FEATURE STYLES                */
/* ════════════════════════════════════════════════════════════ */

/* ═══ COMMAND PALETTE (Feature 30) ═══ */
.cmd-palette{position:absolute;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:60px}
.cmd-palette.hidden{display:none}
.cmd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);border-radius:24px}
.cmd-box{position:relative;z-index:1;width:90%;max-width:340px;border-radius:16px;background:rgba(255,255,255,0.7);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,0.2);box-shadow:0 20px 60px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden;animation:cmdIn .2s ease}
@keyframes cmdIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.cmd-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.06)}
.cmd-icon{font-size:18px}
.cmd-input{flex:1;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:500;color:var(--gray-800);outline:none}
.cmd-input::placeholder{color:var(--gray-400)}
.cmd-shortcut{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.06);color:var(--gray-400)}
.cmd-list{max-height:280px;overflow-y:auto;padding:6px}
.cmd-item{padding:10px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--gray-700);cursor:pointer;transition:all .15s}
.cmd-item:hover,.cmd-item.active{background:rgba(59,130,246,.08);color:#3B82F6}

body.dark-mode .cmd-box{background:rgba(20,20,40,0.85);border-color:rgba(255,255,255,.08)}
body.dark-mode .cmd-input{color:rgba(255,255,255,.9)}
body.dark-mode .cmd-input::placeholder{color:rgba(255,255,255,.3)}
body.dark-mode .cmd-item{color:rgba(255,255,255,.7)}
body.dark-mode .cmd-item:hover,.cmd-item.active{background:rgba(59,130,246,.12);color:#60A5FA}
body.dark-mode .cmd-shortcut{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}

/* ═══ WHATSAPP QUICK ACTIONS (Feature 1) ═══ */
.wa-quick-actions{margin:0 16px 8px;padding:12px 14px;border-radius:14px;background:rgba(37,211,102,0.04);border:1px solid rgba(37,211,102,0.12)}
.wa-qa-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#22C55E;margin-bottom:8px}
.wa-qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wa-qa-btn{padding:6px 4px;border-radius:10px;border:1px solid rgba(37,211,102,0.12);background:rgba(37,211,102,0.06);backdrop-filter:blur(6px);font-family:inherit;font-size:9px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-qa-btn:hover{background:rgba(37,211,102,0.15);border-color:rgba(37,211,102,0.25);color:#16A34A;transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,211,102,.12)}
.wa-qa-btn:active{transform:scale(.95)}

body.dark-mode .wa-quick-actions{background:rgba(37,211,102,0.03);border-color:rgba(37,211,102,0.08)}
body.dark-mode .wa-qa-btn{background:rgba(37,211,102,0.04);border-color:rgba(37,211,102,0.08);color:rgba(255,255,255,.5)}
body.dark-mode .wa-qa-btn:hover{background:rgba(37,211,102,0.12);color:#4ADE80}

/* ═══ PIPELINE PROGRESS BAR (Feature 21) ═══ */
.pipeline-bar{display:flex;align-items:center;gap:0;padding:8px 0;width:100%}
.pipeline-step{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.pipeline-dot{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--gray-400);transition:all .3s}
.pipeline-step.done .pipeline-dot{background:linear-gradient(135deg,#10B981,#059669);border-color:rgba(16,185,129,0.4);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.pipeline-step.active .pipeline-dot{background:linear-gradient(135deg,#3B82F6,#6366F1);border-color:rgba(59,130,246,0.4);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3);animation:dotPulse 2s ease-in-out infinite}
.pipeline-label{font-size:7px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.pipeline-step.done .pipeline-label{color:#10B981}
.pipeline-step.active .pipeline-label{color:#3B82F6}
.pipeline-line{flex:1;height:2px;background:rgba(255,255,255,0.1);margin:0 -2px;margin-bottom:14px}
.pipeline-line.filled{background:linear-gradient(90deg,#10B981,rgba(59,130,246,0.3))}

/* ═══ CONFETTI (Feature 27) ═══ */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-piece{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:confettiFall linear forwards}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}
  25%{transform:translateY(25vh) rotate(180deg) scale(1.1)}
  50%{transform:translateY(50vh) rotate(360deg) scale(.9)}
  75%{transform:translateY(75vh) rotate(540deg) scale(1)}
  100%{transform:translateY(105vh) rotate(720deg) scale(.6);opacity:0}
}

/* ═══ ALBUM STATUS DOTS (Feature 9) ═══ */
.album-dot{font-size:10px;margin-left:4px;cursor:help}

/* ═══ DELIVERY URGENCY BADGE (Feature 24) ═══ */
.delivery-urgency{display:inline-block;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;margin-left:6px;animation:urgencyPulse 2s ease-in-out infinite}
.delivery-urgency.warning{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.2)}
.delivery-urgency.critical{background:rgba(239,68,68,.1);color:#EF4444;border:1px solid rgba(239,68,68,.2)}
@keyframes urgencyPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ═══ VIP TIER BADGE (Feature 18) ═══ */
.vip-badge{display:inline-flex;align-items:center;gap:2px;font-size:8px;font-weight:800;padding:1px 6px;border-radius:6px;letter-spacing:.03em;text-transform:uppercase;margin-left:4px}
.vip-badge.platinum{background:rgba(139,92,246,.1);color:#8B5CF6;border:1px solid rgba(139,92,246,.2)}
.vip-badge.gold{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.2)}
.vip-badge.recurrente{background:rgba(59,130,246,.1);color:#3B82F6;border:1px solid rgba(59,130,246,.2)}

/* ═══ ANTIORBIT BRAND FOOTER (Feature 29) ═══ */
.antiorbit-brand{position:sticky;bottom:0;padding:8px 14px;text-align:center;font-size:10px;font-weight:600;color:var(--gray-400);background:rgba(255,255,255,0.2);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;gap:6px;z-index:10}
.brand-glow{font-size:14px;filter:drop-shadow(0 0 4px rgba(59,130,246,.4));animation:brandGlow 3s ease-in-out infinite}
@keyframes brandGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(59,130,246,.4))}50%{filter:drop-shadow(0 0 8px rgba(139,92,246,.6))}}
.brand-sub{font-size:8px;opacity:.5;font-style:italic}

body.dark-mode .antiorbit-brand{background:rgba(0,0,0,0.2);border-color:rgba(255,255,255,0.04);color:rgba(255,255,255,.3)}

/* ═══ PULSE ANIMATION (used by sync indicator) ═══ */
@keyframes oh-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}



#fullscreenDashboard {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  color: #f8fafc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 9999;
  box-sizing: border-box;
}

body.fullscreen-layout {
  overflow: hidden !important;
}

body.fullscreen-layout #fullscreenDashboard {
  display: flex !important;
  flex-direction: row;
}

body.fullscreen-layout > :not(#orbitPanel),
body.fullscreen-layout #orbitPanel > :not(#fullscreenDashboard):not(#winControls):not(.view-panel) {
  display: none !important;
}

body.fullscreen-layout #winControls {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 10005 !important;
  display: flex !important;
}

body.fullscreen-layout #themeToggle {
  display: none !important;
}

body.fullscreen-layout .fs-sidebar {
  z-index: 10001 !important;
}

body.fullscreen-layout .view-panel:not(.hidden) {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 80px !important;
  right: 0 !important;
  width: calc(100vw - 80px) !important;
  height: 100vh !important;
  z-index: 10000 !important;
  background: #0f172a !important; /* Dark Slate background */
  color: #f1f5f9 !important;
  border-radius: 0 !important;
  border: none !important;
}

body.fullscreen-layout .view-panel:not(#viewPipeline) .scroll-body {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 16px;
}

body.fullscreen-layout .view-panel:not(#viewPipeline) .panel-header,
body.fullscreen-layout .view-panel:not(#viewPipeline) .divider,
body.fullscreen-layout .view-panel:not(#viewPipeline) .panel-footer {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* SIDEBAR STYLING */
.fs-sidebar {
  width: 80px;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 10;
  box-sizing: border-box;
}

.fs-sidebar-brand {
  margin-bottom: 32px;
  text-align: center;
}

.fs-brand-logo {
  font-size: 24px;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.fs-brand-text {
  display: none;
}

.fs-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.fs-nav-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  position: relative;
  transition: all 0.2s ease;
}

.fs-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.fs-nav-tab:hover .fs-nav-icon {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Active tab style - matching the image (bright blue rounded square) */
.fs-nav-tab.active .fs-nav-icon {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.fs-nav-label {
  display: none;
}

/* CONTENT WRAPPER */
.fs-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 32px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
}

/* HEADER */
.fs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.fs-welcome-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(to right, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.fs-welcome-quote {
  font-size: 13px;
  color: #94a3b8;
  margin: 4px 0 0 0;
}

.fs-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 120px;
}

.fs-btn-reports {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}

.fs-btn-reports:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.fs-profile-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.fs-profile-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-profile-badge.pink { background: #ec4899; }
.fs-profile-badge.blue { background: #3b82f6; }
.fs-profile-badge.purple { background: #8b5cf6; }
.fs-profile-badge.green { background: #10b981; }
.fs-profile-badge.gray { background: #6b7280; }

/* BENTO KPI GRID */
.fs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fs-kpi-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  transition: transform 0.2s, border-color 0.2s;
}

.fs-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
}

.fs-kpi-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.fs-kpi-icon-wrapper.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.fs-kpi-icon-wrapper.green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.fs-kpi-icon-wrapper.purple { background: rgba(139, 92, 246, 0.15); color: #c084fc; }
.fs-kpi-icon-wrapper.pink { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

.fs-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fs-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.fs-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

/* SEDES GRID */
.fs-sedes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.fs-sede-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.fs-sede-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.fs-sede-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.fs-sede-count {
  font-size: 12px;
  color: #94a3b8;
}

.fs-progress-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fs-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-progress-fill.blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.fs-progress-fill.purple { background: linear-gradient(90deg, #8b5cf6, #c084fc); }

.fs-progress-pct {
  font-size: 11px;
  color: #94a3b8;
}

/* BOOKINGS CARD */
.fs-bookings-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs-bookings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fs-bookings-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.fs-bookings-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.fs-live-badge {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: fs-blink 1.5s infinite;
}

@keyframes fs-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; transform: scale(1.1); }
}

.fs-table-wrapper {
  overflow-x: auto;
}

.fs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.fs-table th {
  padding: 12px 14px;
  color: #94a3b8;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fs-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
}

.fs-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.01);
}

/* Badge styles inside table */
.fs-table .badge-sede {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.fs-table .badge-sede.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.fs-table .badge-sede.purple { background: rgba(139, 92, 246, 0.15); color: #c084fc; }

.fs-table .status-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.fs-table .status-badge.status-confirmed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.fs-table .status-badge.status-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

/* REPORTS BAR & VIEW */
.fs-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fs-reports-back-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fs-btn-back {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.fs-btn-back:hover {
  color: #ffffff;
}

.fs-reports-export {
  display: flex;
  gap: 12px;
}

.fs-btn-export {
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  color: #ffffff;
}
.fs-btn-export.csv { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); }
.fs-btn-export.csv:hover { background: rgba(59, 130, 246, 0.25); }
.fs-btn-export.pdf { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
.fs-btn-export.pdf:hover { background: rgba(16, 185, 129, 0.25); }

.fs-filters-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.fs-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 16px;
  align-items: flex-end;
}

.fs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fs-filter-group label {
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.fs-filters-grid input,
.fs-filters-grid select {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
  width: 100%;
}

.fs-filters-grid input:focus,
.fs-filters-grid select:focus {
  border-color: #3b82f6;
}

.fs-btn-filter {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  height: 38px;
  transition: background 0.2s;
}

.fs-btn-filter:hover {
  background: #2563eb;
}

/* ============================================================
   STABILITY AND UI FIXES (High-Contrast Tabs, Client Cards, z-index click-blocking)
   ============================================================ */

/* 1. Stacking context pointer-events fix for fullscreen mode */
body.fullscreen-layout #fullscreenDashboard {
  display: flex !important;
  z-index: 10002 !important;
  pointer-events: none;
}
body.fullscreen-layout .fs-sidebar {
  pointer-events: auto !important;
}
body.fullscreen-layout .fs-content {
  pointer-events: auto;
}
body.fullscreen-layout.subview-active #fullscreenDashboard {
  background: transparent !important;
}
body.fullscreen-layout.subview-active .fs-content {
  display: none !important;
}
body.fullscreen-layout #winControls {
  pointer-events: auto !important;
}

/* 2. High-contrast top nav tab styles for light mode */
.top-nav-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.top-nav-slider {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.nav-tab {
  color: #4b5563 !important; /* var(--gray-600) for clean readability */
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
.nav-tab.active {
  color: #111827 !important; /* var(--gray-900) for active */
  font-weight: 700 !important;
}
.nav-tab:hover:not(.active) {
  color: #1f2937 !important; /* var(--gray-800) */
}

/* 3. Dark mode top nav tab overrides */
body.dark-mode .top-nav-track {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .top-nav-slider {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
body.dark-mode .nav-tab {
  color: rgba(255, 255, 255, 0.45) !important;
}
body.dark-mode .nav-tab.active {
  color: rgba(255, 255, 255, 0.95) !important;
}
body.dark-mode .nav-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Client Directory Card styles (missing in panel.css) */
.contact-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
  margin-bottom: 8px;
}
.contact-card:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body.dark-mode .contact-card {
  background: rgba(30, 41, 59, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .contact-card:hover {
  background: rgba(30, 41, 59, 0.6) !important;
}
.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  color: var(--blue-500);
  border: 1px solid rgba(59, 130, 246, 0.15);
  flex-shrink: 0;
}
body.dark-mode .contact-avatar {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}
.contact-info {
  flex: 1;
  min-width: 0;
}
.contact-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-800);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
body.dark-mode .contact-name {
  color: rgba(255, 255, 255, 0.9);
}
.contact-phone {
  font-size: 11px;
  color: var(--gray-500);
}
body.dark-mode .contact-phone {
  color: var(--gray-400);
}
.contact-actions {
  display: flex;
  gap: 8px;
}
.btn-wa-contact {
  background: #22c55e;
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}
.btn-wa-contact:hover {
  background: #16a34a;
  transform: scale(1.05);
}