/* ============================================================ frentista.css — GERADO por gerar_frentista_spa.py Todos os seletores escopados em #screen-frentista para nao colidir com as classes globais do app (header, content, card, tab, modal-overlay, form-group, badge, toast, spinner, active...). Origem: frentista.html (mantido como fallback). ============================================================ */ #screen-frentista{ --primary:#1e40af;--primary-dark:#1e3a8a;--primary-light:#dbeafe; --success:#059669;--success-light:#d1fae5;--success-dark:#047857; --warning:#d97706;--warning-light:#fef3c7; --danger:#dc2626;--danger-light:#fee2e2; --bg:#f1f5f9;--card-bg:#fff; --text:#0f172a;--text-light:#475569;--text-muted:#94a3b8; --border:#cbd5e1;--border-strong:#94a3b8;--border-focus:#1e40af; --radius:10px;--radius-lg:14px; --shadow-sm:0 1px 2px rgba(15,23,42,.05); --shadow:0 2px 4px rgba(15,23,42,.08); --shadow-md:0 4px 12px rgba(15,23,42,.1); --tap:56px; }#screen-frentista *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}#screen-frentista{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;padding-bottom:90px}#screen-frentista .header{background:var(--primary);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(30,64,175,.3)}#screen-frentista .header-left{display:flex;align-items:center;gap:10px}#screen-frentista .header-icon{width:40px;height:40px;background:rgba(255,255,255,.18);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}#screen-frentista .header-title{font-weight:700;font-size:18px;color:#fff;letter-spacing:-.2px}#screen-frentista .header-sub{font-size:12px;color:rgba(255,255,255,.8)}#screen-frentista .header-user{font-size:11px;color:rgba(255,255,255,.75);text-align:right;line-height:1.3}#screen-frentista .header-user strong{color:#fff;display:block;font-size:13px}#screen-frentista .tabs{display:flex;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:68px;z-index:99;box-shadow:var(--shadow-sm)}#screen-frentista .tab{flex:1;padding:13px 4px;text-align:center;font-size:13px;font-weight:600;color:var(--text-light);cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;justify-content:center}#screen-frentista .tab .tab-icon{font-size:19px;line-height:1}#screen-frentista .tab .tab-text{font-size:11px}#screen-frentista .tab.active{color:var(--primary);border-bottom-color:var(--primary)}#screen-frentista .gps-banner{display:none;align-items:flex-start;gap:12px;padding:12px 16px;margin:10px 14px 0;border-radius:var(--radius);border:2px solid;font-size:13px;font-weight:600;line-height:1.5}#screen-frentista .gps-banner.show{display:flex}#screen-frentista .gps-banner.ok{background:var(--success-light);border-color:var(--success);color:var(--success-dark)}#screen-frentista .gps-banner.warn{background:var(--warning-light);border-color:var(--warning);color:#92400e}#screen-frentista .gps-banner.err{background:var(--danger-light);border-color:var(--danger);color:var(--danger)}#screen-frentista .gps-banner .gps-icon{font-size:20px;flex-shrink:0;margin-top:1px}#screen-frentista .gps-banner .gps-body{flex:1}#screen-frentista .gps-banner .gps-title{font-size:13px;font-weight:700;margin-bottom:2px}#screen-frentista .gps-banner .gps-hint{font-size:12px;font-weight:400;opacity:.85}#screen-frentista .gps-banner .gps-btn{margin-top:7px;padding:9px 16px;background:var(--warning);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;width:100%}#screen-frentista .gps-banner.ok .gps-btn{display:none}#screen-frentista .content{padding:14px;max-width:560px;margin:0 auto}#screen-frentista .panel{display:none}#screen-frentista .panel.active{display:block}#screen-frentista .step{margin-bottom:16px}#screen-frentista .step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}#screen-frentista .step-num{width:27px;height:27px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;transition:background .2s}#screen-frentista .step-title{font-size:15px;font-weight:700;color:var(--text)}#screen-frentista .step-title .req{color:var(--danger);margin-left:2px}#screen-frentista .form-group{margin-bottom:12px}#screen-frentista .form-label{display:block;font-size:12px;font-weight:700;color:var(--text-light);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}#screen-frentista .form-label .req{color:var(--danger);margin-left:2px}#screen-frentista select, #screen-frentista input[type="number"], #screen-frentista input[type="text"], #screen-frentista textarea{width:100%;min-height:var(--tap);padding:13px 14px;background:#fff;border:2px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:16px;font-weight:500;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}#screen-frentista textarea{resize:vertical;min-height:80px;font-size:15px}#screen-frentista select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}#screen-frentista select:focus, #screen-frentista input:focus, #screen-frentista textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(30,64,175,.1)}#screen-frentista select.filled, #screen-frentista input.filled{border-color:var(--success);background:#f0fdf4}#screen-frentista .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}#screen-frentista .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}#screen-frentista .nota-hint{font-size:11px;color:var(--text-muted);margin-top:4px;font-style:italic}#screen-frentista .alert{padding:12px 14px;border-radius:var(--radius);font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}#screen-frentista .alert.warn{background:var(--warning-light);color:#92400e;border:1px solid var(--warning)}#screen-frentista .alert.info{background:var(--primary-light);color:var(--primary-dark);border:1px solid #93c5fd}#screen-frentista .produtos-section{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:4px}#screen-frentista .produto-card{border-bottom:1px solid var(--border);padding:14px}#screen-frentista .produto-card:last-child{border-bottom:none}#screen-frentista .produto-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#screen-frentista .produto-badge{display:flex;align-items:center;gap:8px}#screen-frentista .produto-icon{font-size:26px}#screen-frentista .produto-nome{font-weight:700;font-size:15px;color:var(--text)}#screen-frentista .produto-tipo{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}#screen-frentista .toggle-switch{width:48px;height:26px;border-radius:13px;background:var(--border);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}#screen-frentista .toggle-switch.on{background:var(--primary)}#screen-frentista .toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}#screen-frentista .toggle-switch.on::after{transform:translateX(22px)}#screen-frentista .produto-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}#screen-frentista .produto-fields{display:none}#screen-frentista .produto-fields.show{display:block}#screen-frentista .produto-subtotal{background:var(--primary-light);border-radius:8px;padding:10px 14px;text-align:center;margin-top:10px}#screen-frentista .produto-subtotal .sub-valor{font-size:20px;font-weight:800;color:var(--primary-dark);letter-spacing:-.5px}#screen-frentista .produto-subtotal .sub-label{font-size:11px;color:var(--primary-dark);opacity:.75;font-weight:600}#screen-frentista .total-box{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid var(--success);border-radius:var(--radius-lg);padding:18px;text-align:center;margin:4px 0 14px}#screen-frentista .total-box .label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--success-dark);font-weight:700;margin-bottom:2px}#screen-frentista .total-box .value{font-size:36px;font-weight:800;color:var(--success-dark);letter-spacing:-1.5px;line-height:1.1}#screen-frentista .total-box .sub{font-size:12px;color:var(--success-dark);opacity:.65;margin-top:4px}#screen-frentista .foto-area{border:2.5px dashed var(--border-strong);border-radius:var(--radius-lg);padding:28px 16px;text-align:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;background:#fafbfc}#screen-frentista .foto-area.has-photo{border-style:solid;border-color:var(--success);padding:0;background:#000}#screen-frentista .foto-area .placeholder-icon{font-size:48px;margin-bottom:8px;opacity:.45}#screen-frentista .foto-area .placeholder-text strong{display:block;font-size:15px;font-weight:700;margin-bottom:4px}#screen-frentista .foto-area .placeholder-hint{font-size:12px;color:var(--text-light)}#screen-frentista .foto-area img{width:100%;height:auto;max-height:300px;object-fit:contain;display:block}#screen-frentista .foto-remove{position:absolute;top:10px;right:10px;background:var(--danger);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2}#screen-frentista .btn-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(15,23,42,.06);z-index:90}#screen-frentista .btn-submit{width:100%;min-height:var(--tap);padding:14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 2px 8px rgba(30,64,175,.3)}#screen-frentista .btn-submit:active{transform:scale(.98)}#screen-frentista .btn-submit:disabled{opacity:.5;cursor:not-allowed}#screen-frentista .btn-submit.success-btn{background:var(--success);box-shadow:0 2px 8px rgba(5,150,105,.3)}#screen-frentista .btn-submit.loading .btn-text{display:none}#screen-frentista .btn-submit.loading .btn-loading{display:inline-flex}#screen-frentista .btn-loading{display:none;align-items:center;gap:10px}#screen-frentista .spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}#screen-frentista .card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}#screen-frentista .card-title{font-weight:700;font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text)}#screen-frentista .card-title .badge{background:var(--primary);color:#fff;font-size:12px;padding:2px 10px;border-radius:12px;font-weight:700}#screen-frentista .btn-add{display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 16px;background:#fff;color:var(--primary);border:2px dashed var(--primary);border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:700;transition:all .15s;width:100%;min-height:48px}#screen-frentista .btn-add:active{background:var(--primary-light)}#screen-frentista .btn-remove{background:var(--danger-light);color:var(--danger);border:none;padding:7px 12px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:700}#screen-frentista .bomba-row, #screen-frentista .medicao-row{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;background:#fafbfc}#screen-frentista .bomba-row .row-header, #screen-frentista .medicao-row .row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}#screen-frentista .bomba-row .row-title, #screen-frentista .medicao-row .row-title{font-weight:700;font-size:13px;color:var(--primary-dark)}#screen-frentista .litros-calc{background:var(--success-light);color:var(--success-dark);padding:9px 12px;border-radius:8px;font-weight:700;font-size:13px;text-align:center;margin-top:8px}#screen-frentista .fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px}#screen-frentista .foto-thumb{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:1;border:2px solid var(--border);background:#000}#screen-frentista .foto-thumb img{width:100%;height:100%;object-fit:cover}#screen-frentista .foto-thumb .foto-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.72);color:#fff;font-size:10px;padding:4px;text-align:center;font-weight:600}#screen-frentista .foto-thumb .foto-del{position:absolute;top:4px;right:4px;background:var(--danger);color:#fff;border:none;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}#screen-frentista .hist-section-title{font-weight:700;font-size:13px;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;padding-left:2px}#screen-frentista .hist-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow-sm)}#screen-frentista .hist-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}#screen-frentista .hist-placa{font-weight:800;font-size:13px;background:var(--primary);color:#fff;padding:4px 11px;border-radius:6px;letter-spacing:.5px}#screen-frentista .hist-valor{font-weight:800;color:var(--success);font-size:15px}#screen-frentista .hist-details{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;color:var(--text-light)}#screen-frentista .hist-details span{display:flex;align-items:center;gap:4px}#screen-frentista .hist-items{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}#screen-frentista .hist-item-pill{background:var(--primary-light);color:var(--primary-dark);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}#screen-frentista .hist-date{font-size:11px;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;justify-content:space-between}#screen-frentista .gps-status{display:flex;align-items:center;gap:8px;font-size:12px;padding:9px 12px;border-radius:var(--radius);margin-bottom:12px;font-weight:600}#screen-frentista .gps-status.ok{background:var(--success-light);color:var(--success-dark)}#screen-frentista .gps-status.err{background:var(--warning-light);color:#92400e}#screen-frentista .gps-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;animation:pulse 2s infinite}#screen-frentista .gps-dot.ok{background:var(--success)}#screen-frentista .gps-dot.err{background:var(--warning)}#screen-frentista .empty-state{text-align:center;padding:50px 20px;color:var(--text-muted)}#screen-frentista .empty-state .empty-icon{font-size:48px;margin-bottom:12px;opacity:.35}#screen-frentista .empty-state p{font-size:13px;font-weight:500}#screen-frentista .toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(120px);padding:13px 22px;border-radius:var(--radius);font-size:14px;font-weight:600;z-index:999;transition:transform .3s;max-width:90vw;text-align:center;box-shadow:var(--shadow-md)}#screen-frentista .toast.show{transform:translateX(-50%) translateY(0)}#screen-frentista .toast.success{background:var(--success);color:#fff}#screen-frentista .toast.error{background:var(--danger);color:#fff}#screen-frentista .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}#screen-frentista .modal-overlay.show{display:flex}#screen-frentista .modal-overlay img{max-width:100%;max-height:85vh;border-radius:var(--radius)}#screen-frentista .modal-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.18);border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;font-weight:700}#screen-frentista #modalViagem{background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}#screen-frentista #modalViagem .viagem-card{ background:#f4f6f8; border-radius:20px; max-width:480px; width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }#screen-frentista #modalViagem .viagem-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; background:#fff; border-bottom:1px solid #e5e7eb; }#screen-frentista #modalViagem .viagem-head h3{ margin:0; font-size:18px; font-weight:700; color:#111827; }#screen-frentista #modalViagem .vh-x{ width:44px; height:44px; border:none; background:none; color:#6b7280; font-size:22px; border-radius:12px; }#screen-frentista #modalViagem .viagem-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; display:flex; flex-direction:column; gap:12px; }#screen-frentista #modalViagem .viagem-item{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; display:flex; gap:12px; }@media (max-width:480px){#screen-frentista #modalViagem .viagem-card{ max-width:100%; width:100%; border-radius:18px; max-height:92vh; }#screen-frentista #modalViagem .viagem-list{ overflow-x:hidden; padding:10px; gap:10px; }#screen-frentista #modalViagem .viagem-item{ flex-direction:row; gap:10px; }#screen-frentista #modalViagem .vi-ico{ width:36px; height:36px; font-size:18px; }#screen-frentista #modalViagem .vi-head{ align-items:flex-start; gap:6px; }#screen-frentista #modalViagem .vi-cte{ font-size:16px; }#screen-frentista #modalViagem .vi-data{ font-size:12px; }#screen-frentista #modalViagem .vi-val{ font-size:26px; line-height:1.1; }#screen-frentista #modalViagem .vi-val small{ display:block; margin:4px 0 0; font-size:13px; }#screen-frentista #modalViagem .vi-calc{ font-size:13px; margin:4px 0 10px; }#screen-frentista #modalViagem .vi-acoes{ display:grid; grid-template-columns:1fr 96px; gap:10px; width:100%; }#screen-frentista #modalViagem .vi-usar{ min-height:48px; width:100%; white-space:nowrap; font-size:15px; border-radius:12px; }#screen-frentista #modalViagem .vi-dacte{ min-height:48px; width:96px; padding:0; border-radius:12px; } }#screen-frentista #modalViagem .vi-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:12px; background:#e8f0fe; display:flex; align-items:center; justify-content:center; font-size:20px; }#screen-frentista #modalViagem .vi-body{flex:1;min-width:0}#screen-frentista #modalViagem .vi-head{ display:flex; justify-content:space-between; margin-bottom:6px; }#screen-frentista #modalViagem .vi-cte{ font-size:15px; font-weight:700; color:#111827; }#screen-frentista #modalViagem .vi-cte.sem{color:#6b7280}#screen-frentista #modalViagem .vi-data{ font-size:13px; color:#6b7280; }#screen-frentista #modalViagem .vi-mot{ font-size:13px; color:#6b7280; margin-bottom:6px; }#screen-frentista #modalViagem .vi-val{ font-size:28px; font-weight:700; color:#16a34a; }#screen-frentista #modalViagem .vi-val small{ font-size:13px; color:#6b7280; }#screen-frentista #modalViagem .vi-calc{ font-size:13px; color:#9ca3af; margin:4px 0 12px; }#screen-frentista #modalViagem .vi-acoes{ display:flex; gap:8px; }#screen-frentista #modalViagem .vi-usar{ flex:1; min-height:48px; border:none; border-radius:12px; background:#16a34a; color:#fff; font-weight:700; }#screen-frentista #modalViagem .vi-dacte{ min-height:48px; padding:0 16px; border-radius:12px; border:1px solid #2563eb; background:#fff; color:#2563eb; font-weight:700; }#screen-frentista #modalViagem .viagem-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e5e7eb; }#screen-frentista #modalViagem .vf-cancelar{ width:100%; min-height:48px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#111827; font-weight:600; }#screen-frentista /* dark mode removido: o app nao tem tema escuro (styles.css tem o bloco vazio), #screen-frentista entao so este modal virava escuro e destoava do resto. Restaurar junto com um dark mode global, #screen-frentista se um dia existir. */ .viagem-info{margin-top:6px;font-size:13px;padding:8px 10px;border-radius:8px;background:#eff6ff;color:#1e40af;display:none}#screen-frentista .viagem-info.show{display:flex;justify-content:space-between;align-items:center}#screen-frentista .viagem-info a{color:#1e40af;font-weight:700;text-decoration:underline}@media(max-width:380px){#screen-frentista .content{padding:10px}#screen-frentista .total-box .value{font-size:30px}#screen-frentista .produto-subtotal .sub-valor{font-size:18px}} /* ============================================================ Dark mode — segue o toggle do app (html.dark-mode), NAO o tema do sistema operacional. O dark-mode.css global nao conhece as classes desta tela, entao o mapeamento vive aqui. ============================================================ */ html.dark-mode #screen-frentista{ --bg:#14161c; --surface:#1e2230; --border:#333a4d; --text:#e6eaf1; --text-light:#aab3c2; --text-muted:#8b93a3; background:#14161c; color:#e6eaf1; } html.dark-mode #screen-frentista .content{background:#14161c} html.dark-mode #screen-frentista .tabs{background:#1e2230;border-bottom-color:#333a4d} html.dark-mode #screen-frentista .tab{color:#aab3c2} html.dark-mode #screen-frentista .step, html.dark-mode #screen-frentista .card, html.dark-mode #screen-frentista .produto-card, html.dark-mode #screen-frentista .total-box, html.dark-mode #screen-frentista .hist-card, html.dark-mode #screen-frentista .bomba-row, html.dark-mode #screen-frentista .medicao-row{background:#1e2230;border-color:#333a4d;color:#e6eaf1} html.dark-mode #screen-frentista input, html.dark-mode #screen-frentista select, html.dark-mode #screen-frentista textarea{background:#262b3d;border-color:#333a4d;color:#e6eaf1} html.dark-mode #screen-frentista input::placeholder, html.dark-mode #screen-frentista textarea::placeholder{color:#8b93a3} html.dark-mode #screen-frentista .foto-area{background:#262b3d;border-color:#333a4d} html.dark-mode #screen-frentista .btn-add{background:#1e2230} html.dark-mode #screen-frentista .modal-overlay{background:rgba(0,0,0,.9)} /* modal de selecao de viagem */ html.dark-mode #screen-frentista #modalViagem .viagem-card{background:#14161c} html.dark-mode #screen-frentista #modalViagem .viagem-head{background:#1e2230;border-bottom-color:#333a4d} html.dark-mode #screen-frentista #modalViagem .viagem-head h3{color:#e6eaf1} html.dark-mode #screen-frentista #modalViagem .vh-x{color:#aab3c2} html.dark-mode #screen-frentista #modalViagem .viagem-item{background:#1e2230;border-color:#333a4d} html.dark-mode #screen-frentista #modalViagem .vi-ico{background:#243b5f} html.dark-mode #screen-frentista #modalViagem .vi-cte{color:#e6eaf1} html.dark-mode #screen-frentista #modalViagem .vi-cte.sem, html.dark-mode #screen-frentista #modalViagem .vi-data, html.dark-mode #screen-frentista #modalViagem .vi-mot, html.dark-mode #screen-frentista #modalViagem .vi-calc{color:#aab3c2} html.dark-mode #screen-frentista #modalViagem .vi-val{color:#22c55e} html.dark-mode #screen-frentista #modalViagem .vi-usar{background:#22c55e;color:#0b1220} html.dark-mode #screen-frentista #modalViagem .vi-dacte{background:transparent;color:#60a5fa;border-color:#60a5fa} html.dark-mode #screen-frentista #modalViagem .viagem-foot{background:#1e2230;border-top-color:#333a4d} html.dark-mode #screen-frentista #modalViagem .vf-cancelar{background:#1e2230;color:#e6eaf1;border-color:#333a4d} /* ============================================================ GPS — estado proporcional a urgencia - ok : linha discreta, so confirma (nao bloqueia nada) - warn/err: ocupa espaco e mostra acao (bloqueia o envio) Dark: precisa de especificidade alta porque o dark-mode.css global pinta todo div/span com texto claro e apagava o texto sobre o fundo colorido do banner. ============================================================ */ /* --- estado OK compacto (claro e escuro) --- */ #screen-frentista .gps-banner.ok{ align-items:center; padding:9px 14px; border-width:1px; margin:10px 14px 0; font-size:12px; } #screen-frentista .gps-banner.ok .gps-icon{font-size:15px;margin-top:0} #screen-frentista .gps-banner.ok .gps-body{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } #screen-frentista .gps-banner.ok .gps-title{ font-size:12px; font-weight:700; margin:0; } #screen-frentista .gps-banner.ok .gps-title::after{content:' \2713';} #screen-frentista .gps-banner.ok .gps-hint{ font-size:12px; font-weight:500; opacity:1; } /* --- estados que exigem acao ficam evidentes --- */ #screen-frentista .gps-banner.warn, #screen-frentista .gps-banner.err{border-width:2px} /* ---------------- DARK ---------------- */ html.dark-mode #screen-frentista .gps-banner.ok{ background:#0f2a20 !important; border-color:#1d9e75 !important; } html.dark-mode #screen-frentista .gps-banner.ok .gps-icon, html.dark-mode #screen-frentista .gps-banner.ok .gps-title, html.dark-mode #screen-frentista .gps-banner.ok .gps-hint{color:#5dcaa5 !important} html.dark-mode #screen-frentista .gps-banner.warn{ background:#33240a !important; border-color:#d97706 !important; } html.dark-mode #screen-frentista .gps-banner.warn .gps-icon, html.dark-mode #screen-frentista .gps-banner.warn .gps-title, html.dark-mode #screen-frentista .gps-banner.warn .gps-hint{color:#fac775 !important} html.dark-mode #screen-frentista .gps-banner.err{ background:#3a1414 !important; border-color:#e24b4a !important; } html.dark-mode #screen-frentista .gps-banner.err .gps-icon, html.dark-mode #screen-frentista .gps-banner.err .gps-title, html.dark-mode #screen-frentista .gps-banner.err .gps-hint{color:#f09595 !important} html.dark-mode #screen-frentista .gps-banner .gps-btn{color:#1a1005 !important} /* mesma regra ampla apagava estes outros blocos coloridos */ html.dark-mode #screen-frentista .alert.info{ background:#12233f !important; border-color:#185fa5 !important; } html.dark-mode #screen-frentista .alert.info, html.dark-mode #screen-frentista .alert.info *{color:#85b7eb !important} html.dark-mode #screen-frentista .alert.warn{ background:#33240a !important; border-color:#d97706 !important; } html.dark-mode #screen-frentista .alert.warn, html.dark-mode #screen-frentista .alert.warn *{color:#fac775 !important} html.dark-mode #screen-frentista .aviso-viagem{ background:#33240a !important; color:#fac775 !important; } html.dark-mode #screen-frentista .total-box{ background:#0f2a20 !important; border-color:#1d9e75 !important; } html.dark-mode #screen-frentista .total-box *{color:#5dcaa5 !important} html.dark-mode #screen-frentista .produto-subtotal{background:#12233f !important} html.dark-mode #screen-frentista .produto-subtotal *{color:#85b7eb !important} html.dark-mode #screen-frentista .litros-calc{ background:#0f2a20 !important; color:#5dcaa5 !important; } html.dark-mode #screen-frentista .gps-status.ok{background:#0f2a20 !important} html.dark-mode #screen-frentista .gps-status.ok *{color:#5dcaa5 !important} html.dark-mode #screen-frentista .gps-status.err{background:#33240a !important} html.dark-mode #screen-frentista .gps-status.err *{color:#fac775 !important} html.dark-mode #screen-frentista .btn-bar{background:#1e2230 !important;border-top-color:#333a4d !important} html.dark-mode #screen-frentista .tabs{background:#1e2230 !important} html.dark-mode #screen-frentista .foto-area{background:#262b3d !important;border-color:#333a4d !important} html.dark-mode #screen-frentista .btn-add{background:#1e2230 !important} /* ------------------------------------------------------------ Ultimos blocos de fundo claro sem versao dark (varredura automatica do proprio CSS). Sem isso o texto claro do dark-mode.css global cai sobre fundo claro e some. ------------------------------------------------------------ */ html.dark-mode #screen-frentista .viagem-info{ background:#12233f !important; border:1px solid #185fa5; } html.dark-mode #screen-frentista .viagem-info, html.dark-mode #screen-frentista .viagem-info span{color:#b5d4f4 !important} html.dark-mode #screen-frentista .viagem-info a{color:#85b7eb !important} html.dark-mode #screen-frentista select.filled, html.dark-mode #screen-frentista input.filled{ background:#16281f !important; border-color:#1d9e75 !important; color:#e6eaf1 !important; } html.dark-mode #screen-frentista .btn-remove{ background:#3a1414 !important; color:#f09595 !important; } html.dark-mode #screen-frentista .hist-item-pill{ background:#12233f !important; color:#85b7eb !important; } html.dark-mode #screen-frentista .hist-placa{ background:#185fa5 !important; color:#e6eaf1 !important; } html.dark-mode #screen-frentista .hist-valor{color:#5dcaa5 !important} html.dark-mode #screen-frentista .produtos-section, html.dark-mode #screen-frentista .produto-card{ background:#1e2230 !important; border-color:#333a4d !important; } html.dark-mode #screen-frentista .toggle-switch{background:#333a4d} html.dark-mode #screen-frentista .nota-hint, html.dark-mode #screen-frentista .hist-section-title{color:#8b93a3 !important}