:root { --bg:#0a1622; --surface:#122536; --surface-2:#0d1e2c; --surface-3:#173748; --text:#eaf6f8; --muted:#8fa5ae; --line:rgba(255,255,255,.08); --accent:#21d9f0; --accent-strong:#0d9fc9; --success:#28d17c; --warning:#ffae35; --danger:#ff6b7a; --shadow:0 22px 70px rgba(0,0,0,.3); --card-a:rgba(18,43,58,.96); --card-b:rgba(8,25,36,.96); --glass-a:rgba(18,43,58,.74); --glass-b:rgba(8,25,36,.7); }
:root { --status-ok:var(--success); --status-ok-bg:rgba(40,209,124,.08); --status-ok-line:rgba(40,209,124,.4); --status-ok-track:rgba(40,209,124,.25); --status-ok-track-line:rgba(40,209,124,.5);
  --status-attention:var(--warning); --status-attention-bg:rgba(255,174,53,.1); --status-attention-bg-soft:rgba(255,174,53,.08); --status-attention-line:rgba(255,174,53,.4); --status-attention-line-strong:rgba(255,174,53,.5);
  --status-late:var(--danger); --on-accent:#04212b; --on-danger:#1a0509; }
:root[data-theme="light"] { --bg:#eef6f8; --surface:#fff; --surface-2:#f3fafc; --surface-3:#e4f0f4; --text:#0d2530; --muted:#5c7580; --line:rgba(13,37,48,.12); --shadow:0 22px 70px rgba(13,37,48,.14); --card-a:#fff; --card-b:#f3fafc; --glass-a:rgba(255,255,255,.85); --glass-b:rgba(243,250,252,.8); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 15% 0%,rgba(33,217,240,.13),transparent 32rem),radial-gradient(circle at 95% 100%,rgba(75,52,170,.13),transparent 28rem),var(--bg); font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; }
#app { position:relative; z-index:1; }
h1,h2,h3,legend,.sidebar-header strong,.topbar h1 { font-family:'Sora',ui-sans-serif,system-ui,sans-serif; }
.panel { width:min(1120px,calc(100% - 32px)); margin:32px auto; padding:clamp(22px,4vw,42px); background:linear-gradient(145deg,var(--card-a),var(--card-b)); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); }
.panel::before { content:""; display:block; width:54px; height:4px; margin-bottom:24px; border-radius:99px; background:var(--accent); box-shadow:0 0 24px rgba(33,217,240,.7); }
.brand-inline { display:flex; align-items:center; gap:13px; }
.brand-inline img { width:58px; height:42px; object-fit:contain; }
.brand-inline span { display:block; color:var(--muted); font-size:.76rem; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.toolbar > div:last-child { display:flex; gap:8px; }
.home-link { display:inline-flex; align-items:center; padding:0 8px; color:var(--muted); font-size:.82rem; text-decoration:none; }
.home-link:hover { color:var(--accent); }
h1,h2,h3 { margin:0 0 10px; letter-spacing:-.045em; }
h1 { font-size:clamp(1.7rem,4vw,2.5rem); }
h2 { font-size:1.12rem; }
p { color:var(--muted); line-height:1.6; }
small { color:var(--muted); }
form { display:grid; gap:14px; max-width:680px; margin:24px 0; }
input,textarea,select,button,.button { width:100%; min-height:46px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-2); font:inherit; }
textarea { min-height:100px; resize:vertical; }
label { display:grid; gap:7px; color:var(--muted); font-size:.88rem; }
label input[type="checkbox"] { width:auto; min-height:auto; }
.inline-check { display:flex; flex-direction:row; align-items:center; gap:8px; }
.inline-check input[type="checkbox"] { width:auto; min-height:auto; flex:0 0 auto; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { margin-bottom:16px; color:var(--text); font-size:1.25rem; font-weight:800; }
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.booking-panel { max-width:900px; }
.stepper { display:flex; gap:8px; padding:0; margin:0 0 26px; list-style:none; color:var(--muted); font-size:.8rem; }
.stepper li { flex:1; padding:10px 12px; border-bottom:2px solid var(--line); }
.stepper li.active { color:var(--accent); border-color:var(--accent); font-weight:800; }
.stepper-progress { margin:-16px 0 20px; color:var(--muted); font-size:.8rem; }
.booking-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.booking-actions button { width:auto; }
.button-ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.notice { padding:14px 16px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.04); }
.success-box { padding:22px; border:1px solid var(--status-ok-line); border-radius:16px; background:var(--status-ok-bg); }
.success-box .button { margin-top:10px; }
.privacy-note { font-size:.8rem; }
.order-heading,.payment-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.detail-grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-grid div { display:grid; gap:3px; padding:10px; border-radius:10px; background:rgba(255,255,255,.04); }
.detail-grid small,.detail-grid span { color:var(--muted); }
.process-list { display:grid; gap:7px; padding:0; margin:0; list-style:none; }
.process-list li { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-left:3px solid var(--status-attention); background:rgba(255,255,255,.04); }
.process-list li.done { border-color:var(--status-ok); }
.catalog-form { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
.catalog-form textarea,.catalog-form button,.catalog-form output { grid-column:1 / -1; }
input:focus,textarea:focus,select:focus { outline:2px solid rgba(33,217,240,.35); border-color:var(--accent); }
button,.button { display:inline-flex; align-items:center; justify-content:center; width:auto; padding-inline:18px; border:0; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#04212b; font-weight:800; cursor:pointer; text-decoration:none; transition:transform .2s,filter .2s; }
.button.button-ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button:hover,.button:hover { filter:brightness(1.1); transform:translateY(-1px); }
button#logout,.toolbar button,.theme-toggle { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--line); }
.theme-toggle { min-height:38px; padding:8px 12px; font-size:.82rem; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { display:grid; gap:10px; padding:20px; background:linear-gradient(145deg,var(--glass-a),var(--glass-b)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.card h2 { color:var(--text); }
.card strong { color:var(--accent); }
.kpi-card { border-left:4px solid var(--kpi-color,var(--accent)); }
.kpi-card strong { color:var(--kpi-color,var(--accent)); font-size:1.5rem; }
.badge { display:inline-flex; align-items:center; width:fit-content; padding:5px 10px; border:1px solid rgba(33,217,240,.4); border-radius:999px; color:var(--accent); background:rgba(33,217,240,.1); font-size:.78rem; font-weight:800; }
output { color:var(--accent); min-height:20px; }
.section-heading { margin:30px 0 14px; }
@media (max-width:640px) { .panel { width:min(100% - 20px,560px); margin:10px auto; padding:22px 16px; border-radius:22px; } .toolbar { align-items:flex-start; } .toolbar > div:last-child { flex-wrap:wrap; justify-content:flex-end; } .toolbar button,.toolbar .home-link { width:auto; } .brand-inline img { width:48px; } .grid,.form-grid,.catalog-form,.detail-grid { grid-template-columns:1fr; } .card { padding:16px; } .stepper { font-size:.7rem; } .stepper li { padding-inline:4px; } .order-heading,.payment-row { align-items:flex-start; flex-direction:column; } }

.workflow-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* App shell (sidebar + área de conteúdo) para os painéis internos: gestao/atendente/operacional. */
.app-shell { display:flex; align-items:stretch; min-height:100vh; }
.sidebar { flex:0 0 240px; width:240px; display:flex; flex-direction:column; gap:4px; padding:22px 14px; background:linear-gradient(180deg,var(--card-a),var(--card-b)); border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; z-index:10; }
.sidebar-header { display:flex; align-items:center; gap:10px; padding:4px 8px 20px; }
.sidebar-header img { width:42px; height:32px; object-fit:contain; }
.sidebar-header strong { display:block; font-size:.98rem; color:var(--text); }
.sidebar-header span { display:block; color:var(--muted); font-size:.72rem; }
.sidebar-nav { display:flex; flex-direction:column; gap:4px; }
.sidebar-item { justify-content:flex-start; text-align:left; width:100%; min-height:auto; background:transparent; color:var(--muted); font-weight:700; font-size:.88rem; padding:10px 12px; border-radius:10px; border:1px solid transparent; }
.sidebar-item:hover { color:var(--text); background:rgba(255,255,255,.05); }
.sidebar-item.active { color:var(--text); background:rgba(33,217,240,.14); border-color:rgba(33,217,240,.35); }
.sidebar-links { display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.sidebar-links .home-link { padding:8px; }
.app-main { flex:1; min-width:0; padding:clamp(20px,3vw,36px); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:26px; }
.topbar h1 { margin:0; font-size:clamp(1.3rem,3vw,1.8rem); }
.topbar > div:last-child { display:flex; gap:8px; align-items:center; }
button#logout,.toolbar button,.topbar button,.theme-toggle { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--line); }
.topbar .sidebar-toggle { display:none; width:auto; min-height:38px; padding:8px 12px; font-size:1.05rem; }
.sidebar-backdrop { display:none; }
@media (max-width:768px) {
  .sidebar { position:fixed; inset:0 auto 0 0; width:78%; max-width:300px; transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .sidebar.open + .sidebar-backdrop,.sidebar-backdrop.open { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9; }
  .topbar .sidebar-toggle { display:inline-flex; }
  .app-main { padding:16px; }
  .topbar { flex-wrap:wrap; }
}

/* Chips de data/horário do agendamento público (substituem <select> nativos, mesma fonte de dados). */
.chip-fields { display:grid; gap:18px; margin:0 0 14px; }
.chip-row { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.chip-row::-webkit-scrollbar { height:6px; }
.chip-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.date-chip { scroll-snap-align:start; flex:0 0 auto; width:auto; min-height:auto; display:grid; gap:2px; justify-items:center; padding:10px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font:inherit; }
.date-chip strong { font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.date-chip span { font-size:.95rem; font-weight:800; }
.date-chip:hover { border-color:var(--accent); }
.date-chip.active { background:linear-gradient(135deg,var(--accent),var(--accent-strong)); border-color:transparent; }
.date-chip.active strong,.date-chip.active span { color:#04212b; }
.chip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; }
.time-chip { width:auto; min-height:auto; padding:11px 6px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font:inherit; font-weight:700; text-align:center; }
.time-chip:hover { border-color:var(--accent); }
.time-chip.active { background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#04212b; border-color:transparent; }
.date-chip:disabled,.time-chip:disabled { opacity:.4; cursor:not-allowed; }
.date-chip:focus-visible,.time-chip:focus-visible { outline:2px solid rgba(33,217,240,.6); outline-offset:2px; }
.chip-empty { margin:0; padding:10px 2px; color:var(--muted); font-size:.85rem; }

/* Cartões de serviço do agendamento público, agrupados por categoria (substituem o <select>). */
.service-label { margin-bottom:7px; }
.service-grid { display:grid; gap:18px; margin-bottom:16px; }
.service-category-title { margin:0 0 10px; font-size:.95rem; color:var(--accent); }
.service-cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.service-card { display:grid; gap:6px; width:auto; min-height:auto; height:100%; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); text-align:left; cursor:pointer; font:inherit; }
.service-card strong { color:var(--text); font-size:1rem; }
.service-card p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.4; }
.service-card:hover { border-color:var(--accent); }
.service-card.active { border-color:var(--accent); background:rgba(33,217,240,.12); box-shadow:0 0 0 1px var(--accent) inset; }
.service-card.active strong,.service-card.active p { color:var(--text); }
.service-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; font-weight:800; }
.service-card-meta span { color:var(--muted); font-size:.85rem; }
.service-card-price { color:var(--accent) !important; }
.service-card-price s { color:var(--muted); font-weight:600; margin-right:4px; }
.service-card .badge { margin-bottom:2px; }
@media (max-width:640px) { .service-cards { grid-template-columns:1fr; } }

/* Operacional (VWS-21): navegação Hoje/Agenda/Histórico e cartões compactos por OS. */
.op-more-item { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:48px; padding:12px 16px; text-align:left; background:linear-gradient(180deg,var(--card-a),var(--card-b)); color:var(--text); border:1px solid var(--line); border-radius:14px; font-weight:700; }
.op-bottom-nav { display:none; }
@media (max-width:899px) {
  .op-shell .sidebar { display:none; }
  .op-shell .app-main { padding-bottom:84px; }
  .op-bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; gap:4px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,var(--card-a),var(--card-b)); border-top:1px solid var(--line); }
  .op-bottom-item { flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px; background:transparent; border:0; color:var(--muted); font-weight:700; font-size:.78rem; }
  .op-bottom-item.active { color:var(--accent); }
}
@media (min-width:900px) { .op-bottom-nav { display:none !important; } }

.op-today-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:18px 0 14px; }
.op-today-header h2 { margin:0; text-transform:capitalize; }
.op-today-header span { color:var(--muted); font-size:.88rem; }

.op-alert-banner { display:grid; gap:10px; padding:14px 16px; margin-bottom:16px; border:1px solid var(--status-attention-line); border-radius:14px; background:var(--status-attention-bg); }
.op-alert-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--status-attention); font-weight:800; }
.op-alert-top button { width:auto; min-height:38px; padding:6px 14px; }
.op-pending-list { display:grid; gap:10px; }
.op-pending-item { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); }
.op-pending-item strong { display:block; font-family:'Sora',sans-serif; letter-spacing:.04em; }
.op-pending-item .workflow-actions button { width:auto; }

.op-seg-tabs { display:flex; gap:6px; margin-bottom:14px; padding:4px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); }
.op-tab { flex:1; min-height:42px; background:transparent; border:0; border-radius:10px; color:var(--muted); font-weight:700; font-size:.84rem; }
.op-tab span { opacity:.8; }
.op-tab.active { background:rgba(33,217,240,.14); color:var(--text); }
@media (min-width:900px) { .op-seg-tabs { display:none; } }

.op-groups { display:block; }
.op-group { display:none; border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.02); }
.op-group.active { display:grid; gap:10px; align-content:start; }
.op-group > header { display:flex; align-items:center; justify-content:space-between; }
.op-group > header h3 { margin:0; font-size:1rem; }
@media (min-width:900px) {
  .op-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .op-group { display:grid !important; gap:10px; align-content:start; }
}

.op-card-list { display:grid; gap:10px; }
.op-card { display:grid; gap:6px; padding:14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,var(--glass-a),var(--glass-b)); cursor:pointer; }
.op-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.op-plate { font-family:'Sora',sans-serif; font-weight:700; letter-spacing:.04em; font-size:1.02rem; }
.op-time { color:var(--muted); font-weight:700; font-size:.85rem; }
.op-time-late { color:var(--status-attention); }
.op-card-meta,.op-card-service { color:var(--muted); font-size:.85rem; }
.op-card-late { border-color:var(--status-attention-line-strong); }
.op-progress { height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.op-progress-bar { height:100%; background:var(--accent); }
.op-progress-bar.op-progress-late { background:var(--status-attention); }
.op-progress-label { color:var(--muted); font-size:.78rem; }
.op-logistics-line { color:var(--accent); font-size:.8rem; }
.op-empty { padding:16px 4px; text-align:center; }

.op-agenda-day { margin-bottom:20px; }
.op-agenda-day h3 { text-transform:capitalize; }
.op-history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin-bottom:8px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.op-history-item strong { font-family:'Sora',sans-serif; letter-spacing:.03em; }

/* Operacional (VWS-22): detalhe do carro com checklist de etapas. */
.op-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.op-detail { display:none; }
.op-detail:not([hidden]) { display:block; }
.op-detail-back { width:auto; min-height:38px; padding:6px 12px; margin-bottom:12px; background:transparent; border:1px solid var(--line); color:var(--text); }
.op-detail-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.op-plate-lg { font-size:1.4rem; }
.op-detail-sub { margin:0 0 14px; }
.op-detail-value { display:none; }
.op-detail-heading { margin:22px 0 10px; font-size:1rem; }
.op-steps { display:grid; gap:8px; padding:0; margin:0; list-style:none; }
.op-step { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px dashed var(--line); border-radius:12px; }
.op-step-dot { flex:0 0 auto; width:12px; height:12px; margin-top:3px; border-radius:50%; border:2px solid var(--muted); }
.op-step-name { display:block; font-weight:700; }
.op-step-future { color:var(--muted); }
.op-step-done { border-style:solid; border-color:var(--line); opacity:.75; }
.op-step-done .op-step-dot { border-color:var(--status-ok); background:var(--status-ok); }
.op-step-done .op-step-name { text-decoration:line-through; }
.op-step-current { border-style:solid; border-color:var(--accent); background:rgba(33,217,240,.1); }
.op-step-current .op-step-dot { border-color:var(--accent); background:var(--accent); }
.op-primary-action { display:grid; gap:6px; margin:18px 0; text-align:center; }
.op-primary-button { min-height:52px; font-size:1rem; }
.op-detail-secondary { display:flex; gap:8px; margin-bottom:12px; }
.op-detail-secondary button { width:auto; flex:1; }
.op-detail-photos,.op-detail-notes { margin-bottom:14px; }
.op-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.op-photo-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.op-logistics-block { display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); }
.op-logistics-block button { width:auto; }
@media (min-width:900px) {
  .op-shell.has-detail .app-main { display:flex; align-items:flex-start; gap:20px; }
  .op-shell.has-detail .op-content { flex:1; min-width:0; }
  .op-detail:not([hidden]) { flex:0 0 420px; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,var(--card-a),var(--card-b)); }
  .op-detail-value { display:block; }
}
@media (max-width:899px) {
  .op-detail:not([hidden]) { position:fixed; inset:0; z-index:30; overflow-y:auto; padding:16px 16px calc(90px + env(safe-area-inset-bottom)); background:var(--bg); }
}

/* Operacional (VWS-23): telas de check-in/check-out. */
.op-form-title { margin:4px 0 18px; }
.op-capture-form { max-width:none; margin:0; display:grid; gap:16px; }
.op-fuel-field { display:grid; gap:8px; }
.op-fuel-buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.op-fuel-btn { min-height:52px; padding:6px 4px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); font-weight:700; font-size:.82rem; }
.op-fuel-btn.active { background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#04212b; border-color:transparent; }
.op-photo-field { display:grid; gap:8px; }
.op-photo-shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.op-photo-shortcut { position:relative; aspect-ratio:1; min-height:auto; display:flex; align-items:center; justify-content:center; padding:6px; border:1px dashed var(--line); border-radius:14px; background:rgba(255,255,255,.03); color:var(--muted); font-size:.76rem; text-align:center; cursor:pointer; overflow:hidden; }
.op-photo-shortcut img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.op-photo-shortcut.filled { border-style:solid; border-color:var(--status-ok); }
.op-photo-shortcut.filled::after { content:""; position:absolute; top:6px; right:6px; width:14px; height:14px; border-radius:50%; background:var(--status-ok); }
.op-photo-extra { display:block; min-height:46px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--text); text-align:center; cursor:pointer; }
.op-payment-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.op-payment-warning { padding:12px 14px; margin:0; border:1px solid var(--status-attention-line); border-radius:12px; background:var(--status-attention-bg); color:var(--status-attention); font-size:.85rem; }

/* Atendente (VWS-42): busca acima da lista de OS. */
.atd-search { margin-bottom:14px; }

/* Gestão · Painel (VWS-43): indicadores tocáveis e faixa "Hoje na operação". */
.kpi-card { cursor:pointer; }
.kpi-card:hover,.kpi-card:focus-visible { border-color:var(--kpi-color,var(--accent)); outline:none; }
.op-strip-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.op-strip-header h3 { margin:0; }
.op-strip-header .button { min-height:36px; padding:6px 14px; font-size:.82rem; }
.op-strip-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; text-align:center; }
.op-strip-stats strong { display:block; font-size:1.4rem; color:var(--accent); }
.op-strip-stats small { color:var(--muted); }

/* Gestão · Catálogo/Funcionários/Estoque (VWS-45): cartões com interruptor ativo/inativo e estoque com destaque. */
.switch { display:inline-flex; align-items:center; gap:8px; width:auto; min-height:auto; padding:0; background:transparent; border:0; cursor:pointer; font:inherit; color:var(--muted); font-size:.8rem; font-weight:700; }
.switch-track { position:relative; flex:0 0 auto; width:40px; height:24px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid var(--line); transition:background .2s,border-color .2s; }
.switch-track::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .2s,background .2s; }
.switch.active { color:var(--text); }
.switch.active .switch-track { background:var(--status-ok-track); border-color:var(--status-ok-track-line); }
.switch.active .switch-track::after { transform:translateX(16px); background:var(--status-ok); }
.op-card.inactive { opacity:.6; }
.op-card.stock-low { border-color:var(--status-attention-line-strong); }
.op-card-warning { color:var(--status-attention); font-weight:700; }
.op-stock-steppers { display:flex; align-items:center; gap:10px; }
.op-stock-steppers button { width:auto; min-height:38px; padding:0 16px; font-size:1.05rem; background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--line); }
.op-stock-qty { min-width:70px; text-align:center; font-weight:800; }
.op-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.op-list-toolbar h2 { margin:0; }

/* Portal do cliente (VWS-46): celular primeiro, "Meu carro agora", pagamento em destaque e histórico compacto. */
.portal-panel { width:min(680px,calc(100% - 32px)); }
.portal-now { border-color:rgba(33,217,240,.35); background:linear-gradient(145deg,rgba(33,217,240,.1),var(--glass-b)); }
.portal-now .op-card-top h2 { margin:0; }
.portal-now .op-steps { margin-top:4px; }
.portal-pix-highlight { border-color:var(--status-attention-line); background:var(--status-attention-bg-soft); }
.portal-pix-order { display:grid; gap:8px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.portal-pix-order:first-of-type { padding-top:0; margin-top:0; border-top:0; }
.portal-history-item summary { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; cursor:pointer; list-style:none; }
.portal-history-item summary::-webkit-details-marker { display:none; }
.portal-history-item[open] summary { margin-bottom:10px; }

/* Política de Privacidade (VWS-47): rascunho com aviso de revisão jurídica. */
.privacy-panel { width:min(760px,calc(100% - 32px)); }
.privacy-panel h2 { margin-top:26px; font-size:1.05rem; }
.privacy-legal-notice { border-color:var(--status-attention-line); background:var(--status-attention-bg); color:var(--text); margin-bottom:10px; }
.privacy-legal-notice strong { color:var(--status-attention); }

/* VWS-66 — serviços da OS (lista, orçamento e aprovação) */
.os-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.os-line { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.os-line-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.os-line-top span { color: var(--muted); }
.os-line-status { color: var(--status-attention); }
.os-line-status-aprovado { color: var(--status-ok); }
.os-line-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.os-line-actions input { flex: 1 1 140px; min-width: 0; }
.os-line-note { color: var(--muted); margin: 6px 0 0; }

/* VWS-52 — serviço que não cabe na janela: visível, porém desabilitado, com aviso */
.service-card.unavailable { opacity: .55; cursor: not-allowed; }
.service-card-warning { color: var(--status-attention); font-size: .85em; margin: 6px 0 0; }
button.danger { background: var(--status-late); color: var(--on-danger); }
.op-step-group { margin:12px 0 6px; font-size:.95rem; color:var(--accent); }
.op-step .op-step-button { margin-left:auto; flex:0 0 auto; padding:8px 12px; border-radius:10px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-weight:700; cursor:pointer; }

.pix-charge { display:grid; gap:8px; }
.pix-deadline-bar { height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.pix-deadline-bar span { display:block; height:100%; width:100%; background:var(--status-attention-line); transition:width 1s linear; }
.pix-qr summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.intro-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface, transparent); font-size: .85rem; }
.intro-strip img { height: 28px; width: auto; flex: none; }
.intro-strip span { flex: 1; }
.intro-strip a { color: var(--accent); font-weight: 700; white-space: nowrap; }
.intro-strip button { min-width: 44px; min-height: 44px; background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }

/* VWS-115: sino de alertas da equipe no cabeçalho (substitui a doca fixa do VWS-105e) */
.alert-bell { position:relative; display:inline-flex; }
.alert-bell-floating { position:fixed; top:8px; right:8px; z-index:90; }
.alert-bell > button { min-width:44px; min-height:44px; padding:8px 12px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border-radius:12px; cursor:pointer; }
.alert-bell > button.alert-bell-alarm { background:#b91c1c; color:#fff; border-color:#b91c1c; font-weight:700; }
.alert-bell-off { font-size:.85rem; }
.alert-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:95; width:min(280px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--card-a, #0b2230); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.alert-panel[hidden] { display:none; }
.alert-panel .button { min-height:44px; width:100%; }
.alert-panel-warn { margin:0; color:#fecaca; font-weight:700; }
.alert-panel-warn[hidden] { display:none; }
.push-promo { margin:0 0 14px; border-color:rgba(33,217,240,.35); background:rgba(33,217,240,.06); color:var(--text); }
.push-promo p { margin:0 0 10px; }
.push-promo-faixa { padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.push-promo-faixa p { margin:0; font-size:.9rem; color:var(--muted); }
.push-promo-negado, .push-promo-ios { border-color:var(--status-attention-line); background:var(--status-attention-bg); }
.push-promo-negado p, .push-promo-ios p { margin:0; }

/* VWS-117 — Catálogo da gestão: grupos por categoria, linhas compactas, menu ⋯, modo Ordenar e formulário em blocos. */
.cat-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cat-toolbar input[type="search"] { flex:1; min-width:0; }
.cat-new { width:auto; flex:0 0 auto; padding-inline:16px; }
.cat-toolbar-sub { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cat-msg { color:var(--muted); font-size:.85rem; }
.cat-small { width:auto; min-height:36px; padding:6px 12px; font-size:.85rem; background:transparent; border:1px solid var(--line); color:var(--text); }
.cat-groups { display:grid; gap:14px; }
.cat-group { border:1px solid var(--line); border-radius:16px; padding:6px 14px 10px; background:linear-gradient(145deg,var(--glass-a),var(--glass-b)); }
.cat-group-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; }
.cat-group-head h3 { margin:0; font-size:1rem; }
.cat-group-head h3 small { color:var(--muted); font-weight:400; }
.cat-group-actions { display:flex; align-items:center; gap:6px; }
.cat-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); cursor:pointer; }
.cat-row.inactive .cat-row-name { color:var(--muted); }
.cat-row-main { flex:1; min-width:0; }
.cat-row-name { font-weight:600; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cat-row-meta { color:var(--muted); font-size:.85rem; margin-top:2px; }
.cat-badge { padding:2px 8px; font-size:.72rem; }
.cat-badge-off { border-color:var(--line); color:var(--muted); }
.cat-hint,.cat-empty { color:var(--muted); font-size:.85rem; margin:4px 0 8px; list-style:none; }
.cat-order-buttons { display:flex; gap:6px; }
.cat-order-buttons button { width:44px; min-height:40px; padding:0; }
.cat-menu { position:relative; }
.cat-menu summary { list-style:none; cursor:pointer; width:40px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; font-weight:700; }
.cat-menu summary::-webkit-details-marker { display:none; }
.cat-menu-list { position:absolute; right:0; top:calc(100% + 6px); z-index:20; display:grid; min-width:220px; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.cat-menu-list button { width:100%; min-height:42px; text-align:left; background:transparent; border:0; color:var(--text); padding:8px 10px; }
.cat-menu-list button:hover { background:var(--glass-b); }
.cat-menu-list .cat-menu-danger { color:var(--status-late); }
.svc-form { gap:14px; }
.svc-block { border:1px solid var(--line); border-radius:14px; padding:12px 14px 14px; margin:0; display:grid; gap:10px; min-width:0; }
.svc-block legend { padding:0 6px; font-weight:700; }
.svc-block label { display:grid; gap:4px; }
.svc-block label small,.svc-steps-head small { color:var(--muted); font-weight:400; }
.svc-block .inline-check { display:flex; align-items:center; gap:8px; }
.svc-hint { color:var(--muted); font-size:.85rem; margin:0; }
.svc-seg { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.svc-seg label { display:block; position:relative; }
/* VWS-118a: o rádio escondido tinha largura 100% (regra geral de input) e vazava do painel, criando rolagem horizontal. */
.svc-seg input { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; pointer-events:none; }
.svc-seg span { display:block; text-align:center; padding:10px 4px; cursor:pointer; color:var(--muted); }
.svc-seg input:checked + span { background:var(--accent); color:var(--on-accent); font-weight:700; }
.svc-seg input:focus-visible + span { outline:2px solid var(--accent); outline-offset:-2px; }
.svc-table { width:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed; }
.svc-table th { font-size:.8rem; color:var(--muted); font-weight:600; text-align:center; }
.svc-table tbody th { text-align:left; width:72px; }
.svc-table input { width:100%; min-width:0; padding:8px 4px; text-align:center; }
.svc-steps { display:grid; gap:8px; padding:0; margin:0; list-style:none; }
.svc-step { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:8px; border:1px dashed var(--line); border-radius:12px; }
.svc-step input { grid-column:1 / -1; }
.svc-step-buttons { display:flex; gap:4px; }
.svc-step-buttons button { width:40px; min-height:38px; padding:0; }
.danger-zone { margin-top:28px; padding:4px 14px 14px; border:1px solid var(--status-late); border-radius:16px; }
.danger-zone .section-heading { color:var(--status-late); }

/* VWS-118a — Biblioteca de etapas: abas do catálogo, etapa no formulário, seletor com busca e soma de referência. */
.cat-tabs { grid-template-columns:repeat(2,1fr); margin-bottom:10px; max-width:360px; }
.svc-step-main { display:grid; gap:2px; min-width:0; align-self:center; }
.svc-step-main strong { font-weight:600; overflow-wrap:anywhere; }
.svc-step-main small { color:var(--muted); font-size:.8rem; }
.stage-picker { position:relative; }
.stage-picker-list { display:grid; gap:2px; margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); max-height:320px; overflow-y:auto; }
.stage-picker-list[hidden] { display:none; }
.stage-picker-item { display:grid; gap:2px; width:100%; min-height:44px; text-align:left; background:transparent; border:0; color:var(--text); padding:8px 10px; }
.stage-picker-item:hover,.stage-picker-item:focus-visible { background:var(--glass-b); }
.stage-picker-item small { color:var(--muted); font-size:.8rem; }
.stage-picker-new { display:grid; gap:6px; padding:8px 10px; border-top:1px solid var(--line); }
.stage-picker-new strong { overflow-wrap:anywhere; }
.stage-sum { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px dashed var(--line); border-radius:12px; font-size:.85rem; color:var(--muted); }
.stage-sum[hidden] { display:none; }
.stage-sum span { min-width:0; overflow-wrap:anywhere; }

/* VWS-118b — Adicionais da vistoria em Configurações. */
.settings-form { max-width:560px; margin-bottom:8px; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }