@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-color:#f8fafc;--surface-color:#fff;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#475569;--primary:#2563eb;--primary-hover:#1d4ed8;--accent:#dbeafe;--accent-text:#1e40af;--border-color:#e2e8f0;--border-light:#f1f5f9;--success:#10b981;--success-bg:#d1fae5;--error:#ef4444;--error-bg:#fee2e2;--warning:#f59e0b;--warning-bg:#fef3c7;--whatsapp:#25d366;--font-family:"Inter", system-ui, -apple-system, sans-serif;--font-h1:20px;--font-h2:16px;--font-section:14px;--font-body:13px;--font-caption:11px;--space-4:4px;--space-8:8px;--space-10:10px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--radius-btn:12px;--radius-card:12px;--radius-badge:999px;--radius-input:12px;--shadow-soft:0 4px 16px -2px #0f172a0f;--shadow-card:0 1px 3px 0 #0000000d, 0 1px 2px -1px #0000000a;--shadow-dropdown:0 10px 25px -5px #0000001f, 0 8px 10px -6px #00000014}@media (width>=768px){:root{--font-h1:24px;--font-h2:18px;--font-section:15px;--font-body:14px;--font-caption:12px;--radius-card:16px}}@media (prefers-color-scheme:dark){:root{--bg-color:#0f172a;--surface-color:#1e293b;--text-primary:#f8fafc;--text-secondary:#e2e8f0;--text-muted:#cbd5e1;--primary:#3b82f6;--primary-hover:#60a5fa;--accent:#1e3a8a;--accent-text:#bfdbfe;--border-color:#334155;--border-light:#1e293b;--success:#34d399;--success-bg:#064e3b;--error:#f87171;--error-bg:#450a0a;--warning:#fbbf24;--warning-bg:#451a03;--shadow-soft:0 4px 20px -2px #00000059;--shadow-card:0 1px 3px 0 #0000004d;--shadow-dropdown:0 10px 25px -5px #0000008c}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);font-size:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;min-height:100vh;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:100vw;min-height:100vh;display:flex}.app-container{background-color:var(--bg-color);max-width:600px;min-height:100vh;box-shadow:var(--shadow-soft);box-sizing:border-box;flex-direction:column;width:100%;max-width:100%;margin:0 auto;display:flex;position:relative;overflow-x:hidden}@media (width>=1024px){.app-container{max-width:1120px}}.app-header-compact{z-index:100;background-color:var(--surface-color);border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;width:100%;height:56px;min-height:56px;padding:0 12px;display:flex;position:sticky;top:0}@media (width>=580px){.app-header-compact{gap:12px;height:64px;min-height:64px;padding:0 16px}}@media (width>=768px){.app-header-compact{padding:0 28px}}.main-content,.content-area{box-sizing:border-box;flex:1;width:100%;max-width:100%;padding:14px 14px 85px}@media (width>=580px){.main-content,.content-area{padding:18px 20px 85px}}@media (width>=768px){.main-content,.content-area{padding:24px 32px 85px}}@media (width<=580px){.hide-mobile{display:none!important}}@media (width>=581px){.show-mobile-only{display:none!important}}.screen-title{font-size:var(--font-h1);letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--space-12);font-weight:800;line-height:1.25}.bottom-nav{width:100%;max-width:600px;min-height:56px;padding-bottom:max(10px, env(safe-area-inset-bottom,0px));background-color:var(--surface-color);border-top:1px solid var(--border-color);z-index:999;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-sizing:border-box;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 20px #00000014}@media (width>=1024px){.bottom-nav{max-width:1120px}}.nav-item{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border:none;outline:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;height:100%;min-height:48px;padding:4px 0;font-size:11px;font-weight:600;transition:all .15s;display:flex}.nav-item:hover{color:var(--text-primary)}.nav-item.active{color:var(--primary);font-weight:800}.nav-item.active svg{stroke:var(--primary);transform:translateY(-1px)}.card{background-color:var(--surface-color);border-radius:var(--radius-card);padding:var(--space-16);margin-bottom:var(--space-14,14px);border:1px solid var(--border-color);box-shadow:var(--shadow-card);box-sizing:border-box;width:100%;max-width:100%;transition:transform .15s,box-shadow .15s;overflow:visible}.card-interactive:hover{box-shadow:var(--shadow-soft);border-color:var(--primary);transform:translateY(-1.5px)}input,select,textarea{border-radius:var(--radius-input);border:1.5px solid var(--border-color);background-color:var(--surface-color);width:100%;max-width:100%;min-height:44px;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-body);box-sizing:border-box;outline:none;padding:10px 14px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.payment-pills{box-sizing:border-box;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:6px;display:grid}.payment-pill{border-radius:var(--radius-btn);border:1px solid var(--border-color);background-color:var(--surface-color);height:44px;min-height:44px;color:var(--text-primary);cursor:pointer;box-sizing:border-box;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:600;transition:all .18s;display:flex}.payment-pill:hover{border-color:var(--primary);background-color:var(--border-light)}.payment-pill.active{box-shadow:0 4px 12px #2563eb47;background-color:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;font-weight:700!important}@media (width<=480px){.payment-pills{grid-template-columns:repeat(2,1fr)}}.btn{border-radius:var(--radius-btn);width:100%;max-width:100%;height:44px;min-height:44px;font-family:var(--font-family);letter-spacing:-.01em;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;box-sizing:border-box;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:700;line-height:1;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000d}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)scale(.99)}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn:disabled,.btn[disabled]{opacity:.55!important;cursor:not-allowed!important;box-shadow:none!important;transform:none!important}.btn-primary{background:var(--primary);border:1px solid var(--primary);box-shadow:0 3px 10px #2563eb47;color:#fff!important}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 5px 16px #2563eb61}.btn-outline{background-color:var(--surface-color);border:1.5px solid var(--border-color);color:var(--text-primary);box-shadow:none}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background-color:var(--accent)}.btn-ghost{cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-btn);box-sizing:border-box;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:8px 12px;font-size:13.5px;font-weight:600;transition:all .15s;display:inline-flex}.btn-ghost:hover{background-color:var(--border-light);color:var(--text-primary)}.btn-success{background:var(--success);border:1px solid var(--success);box-shadow:0 3px 10px #10b98147;color:#fff!important}.btn-success:hover{background:#059669}.btn-danger,.btn-error{background:var(--error);border:1px solid var(--error);box-shadow:0 3px 10px #ef444447;color:#fff!important}.btn-danger:hover,.btn-error:hover{background:#dc2626}.btn-warning{background:var(--warning);border:1px solid var(--warning);color:#fff!important}.btn-sm{border-radius:10px!important;height:36px!important;min-height:36px!important;padding:0 12px!important;font-size:12.5px!important}.btn-lg{border-radius:14px!important;height:50px!important;min-height:50px!important;padding:0 22px!important;font-size:15.5px!important;font-weight:800!important}.chip{border-radius:var(--radius-badge);font-size:var(--font-caption);background-color:var(--accent);color:var(--accent-text);box-sizing:border-box;align-items:center;padding:4px 10px;font-weight:700;line-height:1.25;display:inline-flex}.chip-success{color:#10b981!important;background-color:#10b98129!important}.chip-warning{color:#f59e0b!important;background-color:#f59e0b29!important}.chip-error{color:#ef4444!important;background-color:#ef444429!important}.chip-info{background-color:var(--accent)!important;color:var(--accent-text)!important}.flex-between{box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.grid-2{gap:var(--space-10);box-sizing:border-box;grid-template-columns:repeat(2,1fr);width:100%;display:grid}.grid-3{gap:var(--space-12);box-sizing:border-box;grid-template-columns:1fr;width:100%;display:grid}@media (width>=600px){.grid-3{grid-template-columns:repeat(3,1fr)}}.grid-4{gap:var(--space-8);box-sizing:border-box;grid-template-columns:repeat(2,1fr);width:100%;display:grid}@media (width>=640px){.grid-4{grid-template-columns:repeat(4,1fr)}}.skeleton{background:linear-gradient(90deg, var(--border-light) 25%, var(--border-color) 50%, var(--border-light) 75%);border-radius:var(--radius-card);background-size:200% 100%;animation:1.5s infinite loading}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-fade-in{animation:.18s cubic-bezier(.16,1,.3,1) fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;padding:var(--space-12);box-sizing:border-box;background-color:#0f172aa6;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal-sheet{background-color:var(--surface-color);border-radius:var(--radius-card);width:100%;max-width:520px;padding:var(--space-20);max-height:90vh;box-shadow:var(--shadow-dropdown);box-sizing:border-box;border:1px solid var(--border-color);overflow-y:auto}.action-dropdown-menu{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-btn);z-index:9999;box-sizing:border-box;min-width:170px;margin-top:4px;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 12px 30px #0000002e,0 4px 12px #00000014}.action-dropdown-item{width:100%;min-height:44px;color:var(--text-primary);cursor:pointer;text-align:left;box-sizing:border-box;background:0 0;border:none;align-items:center;gap:10px;padding:10px 14px;font-size:13px;font-weight:600;transition:background-color .15s;display:flex}.action-dropdown-item:hover{background-color:var(--border-light)}.action-dropdown-item.danger{color:var(--error)}.action-dropdown-item.danger:hover{background-color:var(--error-bg)}.eye-power-label{color:var(--text-muted);text-transform:uppercase;text-align:center;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:10px;font-weight:800;overflow:hidden}.report-date-container{box-sizing:border-box;flex-direction:column;gap:8px;width:100%;display:flex}.report-date-inputs-row{background-color:var(--border-light);border-radius:var(--radius-card);border:1px solid var(--border-color);box-sizing:border-box;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;width:100%;padding:8px 10px;display:grid}.report-search-btn-mobile{border-radius:var(--radius-card);background-color:var(--primary);color:#fff;cursor:pointer;box-sizing:border-box;border:none;justify-content:center;align-items:center;gap:6px;width:100%;height:42px;min-height:42px;padding:0 16px;font-size:12.5px;font-weight:700;transition:opacity .15s,transform .1s;display:flex}.report-search-btn-mobile:active{opacity:.85;transform:scale(.99)}@media (width>=640px){.report-date-container{flex-direction:row;align-items:center}.report-date-inputs-row{flex:1}.report-search-btn-mobile{width:auto;height:48px;min-height:48px;padding:0 20px}}.report-action-buttons-row{box-sizing:border-box;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;display:grid}
