:root { font-family: Inter, system-ui, sans-serif; color: #182738; background: #eef2f5; }
* { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; } button, input, select { font: inherit; } button { cursor: pointer; touch-action: manipulation; }
.entry-screen { min-height: 100vh; padding: 20px 14px; display: grid; place-items: center; color: white; background: radial-gradient(circle at top, #245872 0, #102f46 46%, #081e2e 100%); }
.boot-card { display: grid; justify-items: center; gap: 14px; color: white; text-align: center; }
.boot-card strong { font-size: 1.6rem; font-weight: 950; letter-spacing: .04em; }
.boot-card span { color: #b9cbd6; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.login-card, .menu-card { width: min(100%, 620px); border: 1px solid #ffffff22; border-radius: 20px; padding: 25px 20px; background: #0d2638e8; box-shadow: 0 20px 60px #0007; }
.login-card { display: grid; gap: 13px; max-width: 420px; }
.login-mark { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 4px; border-radius: 18px; color: #07372e; background: #55e1c5; font-size: 1.5rem; font-weight: 950; letter-spacing: -.08em; }
.entry-kicker { margin: 0; color: #55e1c5; font-size: .7rem; font-weight: 950; letter-spacing: .16em; text-align: center; }
.login-card h1 { font-size: 1.75rem; text-align: center; } .entry-copy { margin: -7px 0 8px; color: #b9cbd6; text-align: center; }
.login-card label { display: grid; gap: 6px; color: #b9cbd6; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.login-card input { width: 100%; min-height: 58px; border: 2px solid #527083; border-radius: 10px; padding: 11px 13px; color: #102a3c; background: white; font-size: 1.05rem; font-weight: 850; }
.login-card input:focus { border-color: #55e1c5; outline: 3px solid #55e1c533; }
.login-card button { min-height: 60px; margin-top: 4px; border: 0; border-radius: 10px; color: #07372e; background: #55e1c5; font-size: 1rem; font-weight: 950; }
.login-card button:disabled { opacity: .6; } .login-card small { color: #91a9b7; text-align: center; } .login-error { margin: 0; border-radius: 9px; padding: 12px; color: white; background: #b91c1c; font-size: .82rem; font-weight: 850; text-align: center; }
.menu-card { padding: 20px; } .menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .menu-header .entry-kicker { text-align: left; } .menu-header h1 { margin-top: 5px; font-size: 1.35rem; }
.menu-user { margin: 7px 0 0; color: #b9cbd6; font-size: .8rem; } .outline-button { min-height: 44px; border: 1px solid #ffffff55; border-radius: 9px; padding: 0 12px; color: white; background: transparent; font-weight: 900; }
.mode-buttons { display: grid; gap: 10px; } .mode-button { position: relative; display: grid; gap: 4px; width: 100%; min-height: 94px; border: 3px solid transparent; border-radius: 14px; padding: 14px 16px; color: white; text-align: left; box-shadow: 0 6px 15px #0003; }
.mode-button span { font-size: 1.5rem; font-weight: 950; letter-spacing: .025em; } .mode-button small { font-size: .85rem; font-weight: 750; } .mode-button b { justify-self: start; margin-top: 5px; border-radius: 99px; padding: 5px 8px; color: #082434; background: #ffffffd9; font-size: .65rem; }
.mode-pbo_gt { background: #7c3aed; } .mode-coc_gt { background: #087f6b; } .mode-ecommerce_gt { background: #c25b0a; } .mode-ecommerce_gt_carro { background: #0369a1; } .mode-dashboard_carros { background: #a21caf; } .mode-button:active { transform: scale(.985); }
.menu-note { margin: 17px 0 0; color: #91a9b7; font-size: .73rem; text-align: center; }
.app-shell { max-width: 720px; min-height: 100vh; margin: auto; background: #f7f9fa; }
.app-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: white; background: #123047; }
.app-actions { display:flex; align-items:center; gap:7px; }
.brand, .section-kicker { margin: 0 0 2px; color: #53d4bd; font-size: .66rem; font-weight: 900; letter-spacing: .13em; }
h1 { margin: 0; font-size: 1.15rem; letter-spacing: .04em; } h2 { margin: 0; font-size: 1.2rem; }
.operator-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; color: white; background: #071e2e; } .operator-bar button { min-height: 39px; border: 1px solid #ffffff33; border-radius: 8px; padding: 0 10px; color: white; background: #ffffff0d; font-size: .69rem; font-weight: 900; } .operator-bar div { display: grid; min-width: 0; text-align: center; } .operator-bar strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; } .operator-bar span { color: #55e1c5; font-size: .64rem; font-weight: 900; }
.connection { border-radius: 999px; padding: 6px 9px; font-size: .69rem; font-weight: 900; } .connection.online { color: #065f46; background: #a7f3d0; } .connection.offline { color: #991b1b; background: #fecaca; }
.route-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: white; background: #1c465d; }
.route-main { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; } .route-code { border-left: 1px solid #ffffff55; padding-left: 10px; color: #a7f3d0; font-size: .8rem; font-weight: 900; }
.icon-button { width: 40px; height: 40px; border: 1px solid #ffffff44; border-radius: 9px; color: white; background: #ffffff12; font-size: 1.5rem; }
.cart-dashboard { padding: 14px 12px 28px; } .dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; } .dashboard-heading button { min-height:44px; border:0; border-radius:8px; padding:0 11px; color:white; background:#a21caf; font-size:.7rem; font-weight:950; }
.dashboard-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:13px 0 8px; } .dashboard-summary div { display:grid; gap:2px; border-radius:9px; padding:9px 5px; color:#526578; background:white; text-align:center; box-shadow:0 2px 6px #102a3c12; } .dashboard-summary span { font-size:.58rem; font-weight:900; } .dashboard-summary strong { color:#102a3c; font-size:1.15rem; }
.dashboard-status { min-height:30px; color:#64748b; font-size:.7rem; text-align:right; } .dashboard-carts { display:grid; gap:9px; } .cart-card { overflow:hidden; border:2px solid #d8e2e8; border-radius:12px; background:white; box-shadow:0 3px 9px #102a3c12; } .cart-card.ready { border-color:#10b981; } .cart-card.no-rack { border-color:#ef4444; }
.cart-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px 8px; } .cart-card-head div { min-width:0; } .cart-rank { color:#a21caf; font-size:.63rem; font-weight:950; } .cart-name { display:block; overflow:hidden; font-size:1.05rem; text-overflow:ellipsis; white-space:nowrap; } .cart-total { display:grid; place-items:center; min-width:54px; height:54px; border-radius:50%; color:white; background:#123047; font-size:1.2rem; font-weight:950; }
.cart-breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#dce5eb; } .cart-breakdown div { display:grid; gap:2px; padding:8px; background:#f8fafc; text-align:center; } .cart-breakdown span { color:#64748b; font-size:.6rem; font-weight:900; } .cart-breakdown strong { font-size:1rem; } .cart-breakdown .oh strong { color:#d97706; } .cart-breakdown .rt strong { color:#0284c7; } .cart-breakdown .tr strong { color:#059669; }
.cart-progress { height:10px; background:#e2e8f0; } .cart-progress span { display:block; height:100%; background:#10b981; } .cart-ready { padding:8px 12px; color:#065f46; background:#d1fae5; font-size:.72rem; font-weight:950; text-align:center; } .cart-pending { padding:7px 12px; color:#475569; font-size:.68rem; font-weight:850; text-align:right; }
.filters-panel { margin: 10px 12px; border: 2px solid #0f766e; border-radius: 9px; background: white; } .filters-panel summary { padding: 11px 13px; color: #0f4c45; font-size: .82rem; font-weight: 900; }
#search-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 12px 12px; } #search-form label { display: grid; gap: 4px; color: #526578; font-size: .68rem; font-weight: 800; } #search-form input, #search-form select { width: 100%; min-width: 0; padding: 9px; border: 1px solid #bdcad4; border-radius: 7px; background: white; color: #152f41; font-weight: 800; } #search-form button { grid-column: span 2; min-height: 44px; border: 0; border-radius: 8px; color: white; background: #087f6b; font-weight: 900; }
.page-status { min-height: 36px; padding: 8px 14px; color: #526578; font-size: .78rem; }
.bags-section { padding: 5px 12px 14px; } .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .count-badge { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; color: white; background: #087f6b; font-weight: 900; }
.bag-list { display: grid; gap: 10px; } .bag-card { overflow: hidden; border: 1px solid #d8e0e6; border-radius: 12px; background: white; box-shadow: 0 2px 7px #102a3c12; }
.bag-card-main { padding: 14px; } .bag-top { display: flex; justify-content: space-between; gap: 8px; } .bag-master { font-size: 1.12rem; font-weight: 900; letter-spacing: .015em; } .bag-status { border-radius: 999px; padding: 5px 8px; font-size: .66rem; font-weight: 900; } .bag-status.open { color: #075985; background: #e0f2fe; } .bag-status.done { color: #065f46; background: #d1fae5; }
.bag-card.selected { outline: 4px solid #14b8a6; }
.prealert-id { margin-top: 3px; color: #087f6b; font-size: .65rem; font-weight: 900; letter-spacing: .04em; }
.bag-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 12px; } .bag-meta div { display: grid; gap: 2px; } .bag-meta span { color: #738397; font-size: .65rem; text-transform: uppercase; } .bag-meta strong { font-size: .84rem; }
.bag-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; border-top: 1px solid #e5ebef; background: #e5ebef; } .bag-actions button { min-height: 54px; border: 0; font-weight: 900; } .start-scan { color: white; background: #087f6b; font-size: .92rem; } .closed-choice { color: #64748b; background: #e2e8f0; font-size: .78rem; cursor: not-allowed; } .view-docs { color: #23465d; background: #f8fafc; }
.empty-state { padding: 32px 18px; border: 1px dashed #bcc9d2; border-radius: 10px; color: #657789; background: white; text-align: center; }
.closed-section { margin: 0 12px 24px; border-top: 1px solid #dce4e9; } .closed-section summary { padding: 15px 2px; color: #526578; font-size: .82rem; font-weight: 900; } .closed-section .bag-actions { grid-template-columns: 1fr; } .closed-section .view-docs { min-height: 48px; }
.scanner-screen, .documents-screen { position: fixed; inset: 0; z-index: 100; overflow-y: auto; color: white; background: #102a3c; }
.scanner-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #0b2232; } .scanner-tools { display:flex; gap:7px; } .back-button, .sound-toggle, .install-app { min-height: 44px; border: 1px solid #ffffff35; border-radius: 9px; color: white; background: #ffffff12; font-weight: 900; } .back-button { padding: 0 14px; } .sound-toggle { width: 48px; font-size: 1.15rem; } .install-app { padding:0 10px; color:#071b29; background:#12c28a; border-color:#12c28a; font-size:.7rem; }
.scanner-mode { display: grid; place-items: center; border-radius: 8px; padding: 0 9px; color: #07372e; background: #55e1c5; font-size: .68rem; font-weight: 950; }
.scanner-bag { display: grid; gap: 4px; padding: 15px 16px; background: #173d52; } .scanner-bag span { color: #8ed8ca; font-size: .66rem; font-weight: 900; letter-spacing: .12em; } .scanner-bag strong { font-size: 1.35rem; }
.cache-state { padding: 8px 16px; color: #0f5132; background: #d1fae5; font-size: .7rem; font-weight: 900; } .cache-state.loading { color: #78350f; background: #fef3c7; } .cache-state.error { color: #7f1d1d; background: #fee2e2; }
.flow-step { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; } .flow-step > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #082f49; background: #5eead4; font-weight: 950; } .flow-step div { display: grid; gap: 2px; } .flow-step strong { font-size: .83rem; letter-spacing: .08em; } .flow-step small { color: #a9c0cf; font-size: .7rem; }
.seal-stage { padding-bottom: 18px; } #seal-form { display: grid; gap: 10px; padding: 8px 16px; } #seal-code { width: 100%; height: 78px; border: 3px solid #fbbf24; border-radius: 10px; padding: 10px; color: #102a3c; background: #fff; font-size: 1.25rem; font-weight: 950; text-align: center; text-transform: uppercase; } #seal-form button { height: 58px; border: 0; border-radius: 9px; color: #102a3c; background: #fbbf24; font-weight: 950; }
.active-seal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px 16px; color: #d1fae5; background: #065f46; } .active-seal span { font-size: .65rem; font-weight: 900; } .active-seal strong { overflow: hidden; text-overflow: ellipsis; } .active-seal button { min-height: 38px; border: 1px solid #ffffff55; border-radius: 7px; color: white; background: transparent; font-size: .68rem; font-weight: 900; }
.scan-action-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; background: #0b2638; } .scan-action-switch button { min-height: 52px; border: 2px solid #4b6b7e; border-radius: 9px; color: #b9cbd6; background: #16394d; font-size: .78rem; font-weight: 950; } .scan-action-switch button.active { border-color: #5eead4; color: #042f2e; background: #5eead4; }
.active-rack { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px 16px; color: #e0f2fe; background: #075985; } .active-rack span { font-size: .65rem; font-weight: 900; } .active-rack strong { overflow: hidden; text-overflow: ellipsis; } .active-rack button { min-height: 38px; border: 1px solid #ffffff66; border-radius: 7px; color: white; background: transparent; font-size: .68rem; font-weight: 900; }
.active-rt-rack { color:#ecfdf5; background:#047857; } .active-oh-rack { color:#422006; background:#fbbf24; } .active-oh-rack button { border-color:#78350f; color:#422006; }
.rack-stage { padding: 14px 16px 4px; background: #0b2638; } .rack-stage form { display: grid; gap: 8px; } .rack-stage label { color: #bae6fd; font-size: .72rem; font-weight: 900; letter-spacing: .06em; } .rack-stage input { min-height: 58px; border: 3px solid #38bdf8; border-radius: 9px; padding: 0 12px; font-size: 1.18rem; font-weight: 900; } .rack-stage button { min-height: 52px; border: 0; border-radius: 9px; color: white; background: #0284c7; font-weight: 950; }
.rack-stage.target-rt input { border-color:#34d399; } .rack-stage.target-rt button { color:white; background:#059669; } .rack-stage.target-oh input { border-color:#fbbf24; } .rack-stage.target-oh button { color:#422006; background:#fbbf24; }
.package-step { padding-bottom: 0; }
#scan-form { display: grid; gap: 9px; padding: 16px; } #scan-form label { color: #a9c0cf; font-size: .7rem; font-weight: 900; letter-spacing: .1em; } #scan-code { width: 100%; height: 70px; border: 3px solid #5eead4; border-radius: 10px; padding: 10px; color: #102a3c; background: white; font-size: 1.18rem; font-weight: 900; text-transform: uppercase; } .scan-submit { height: 54px; border: 0; border-radius: 9px; color: white; background: #087f6b; font-weight: 900; }
.scan-feedback { display: flex; align-items: center; gap: 14px; min-height: 104px; margin: 0 16px 14px; border-radius: 12px; padding: 14px; color: #e2e8f0; background: #1d4053; } .scan-result-icon { display: grid; place-items: center; flex: 0 0 62px; height: 62px; border-radius: 50%; color: white; background: #567183; font-size: 2.3rem; font-weight: 900; } .scan-message { margin: 0; font-size: 1.02rem; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.scan-feedback.success { color: #064e3b; background: #a7f3d0; } .scan-feedback.success .scan-result-icon { background: #059669; } .scan-feedback.warning { color: #78350f; background: #fde68a; } .scan-feedback.warning .scan-result-icon { background: #d97706; } .scan-feedback.error { color: #7f1d1d; background: #fecaca; } .scan-feedback.error .scan-result-icon { background: #dc2626; }
.scan-feedback.info { color: #0c4a6e; background: #bae6fd; } .scan-feedback.info .scan-result-icon { background: #0284c7; }
.scan-feedback.warning { min-height: 155px; border: 4px solid #f59e0b; padding: 18px; } .scan-feedback.warning .scan-result-icon { flex-basis: 76px; height: 76px; color: #78350f; background: #fbbf24; font-size: 3.1rem; } .scan-feedback.warning .scan-message { font-size: 1.22rem; line-height: 1.18; }
.scan-feedback.not-member { min-height: 155px; border: 4px solid #fca5a5; color: white; background: #b91c1c; } .scan-feedback.not-member .scan-result-icon { flex-basis: 76px; height: 76px; color: #991b1b; background: white; font-size: 3.2rem; } .scan-feedback.not-member .scan-message { font-size: 1.22rem; line-height: 1.18; }
.scan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 16px; overflow: hidden; border-radius: 10px; background: #ffffff22; } .scan-stats div { display: grid; gap: 4px; padding: 10px; background: #173d52; } .scan-stats span { color: #a9c0cf; font-size: .62rem; text-transform: uppercase; } .scan-stats strong { font-size: 1rem; } .scan-total { grid-column: span 2; text-align: center; } .scan-total strong { color: #5eead4; font-size: 2rem; }
.recent-scans { display: grid; gap: 6px; list-style: none; margin: 14px 16px; padding: 0; } .recent-scans li { border-radius: 8px; padding: 10px; color: #dbeafe; background: #173d52; font-size: .78rem; font-weight: 800; } .recent-scans li.success { border-left: 5px solid #34d399; } .recent-scans li.warning { border-left: 5px solid #fbbf24; } .recent-scans li.error { border-left: 5px solid #ef4444; }
.error-overlay { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; color: white; background: #b91c1c; text-align: center; } .error-overlay[hidden] { display: none; } .error-symbol { display: grid; place-items: center; width: 92px; height: 92px; border: 7px solid white; border-radius: 50%; font-size: 5rem; line-height: 1; } .error-overlay strong { font-size: 1.35rem; } .error-overlay span { font-size: .88rem; } .error-overlay code { width: 100%; padding: 13px; border-radius: 8px; color: #7f1d1d; background: white; font-size: 1rem; font-weight: 950; overflow-wrap: anywhere; } .error-overlay button { min-width: 180px; min-height: 52px; border: 2px solid white; border-radius: 9px; color: white; background: transparent; font-weight: 950; }
.snackbar { position: fixed; left: 50%; bottom: 18px; z-index: 250; width: min(calc(100% - 28px), 520px); transform: translateX(-50%); border-radius: 9px; padding: 13px 16px; color: white; background: #047857; box-shadow: 0 8px 28px #0005; font-size: .82rem; font-weight: 900; text-align: center; } .snackbar[hidden] { display: none; }
.documents-screen { color: #182738; background: #f3f6f8; } .documents-heading { padding: 15px; background: white; } .documents-heading p { margin: 4px 0 0; color: #657789; } .document-list { display: grid; gap: 9px; padding: 12px; } .document-card { border: 1px solid #d9e2e8; border-radius: 10px; padding: 12px; background: white; } .document-card h3 { margin: 0 0 7px; font-size: .95rem; } .document-card p { margin: 3px 0; color: #607284; font-size: .76rem; }
@media (min-width: 721px) { .app-shell { box-shadow: 0 0 30px #102a3c20; } .scanner-screen, .documents-screen { left: 50%; width: 720px; transform: translateX(-50%); } }