/* VUE — acabamento visual. Classes, IDs e estados operacionais permanecem no app. */
#despesa_inicio[hidden] { display: none; }
#despesa_inicio { grid-row: 3 / 5; grid-column: 1; align-self: center; justify-self: center; width: min(420px, calc(100% - 40px)); padding: 32px 0; text-align: center; }
#despesa_inicio h2 { font-size: 26px; font-weight: 650; letter-spacing: -.6px; margin: 0 0 10px; }
#despesa_inicio p { color: var(--vue-muted); font-size: 14px; line-height: 1.5; margin: 0 0 24px; }
#despesa_inicio .btn { width: 100%; min-height: 52px; margin-bottom: 12px; justify-content: center; }
body.expense-mode #video, body.expense-mode #frame, body.expense-mode #app > .hint, body.expense-mode #app > .controls, body.expense-mode #err { display: none !important; }
#despesa_form > label { display: block; font-size: 13px; margin: 12px 0 5px; }
#despesa_form > input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--vue-line); border-radius: 8px; background: #fff; color: var(--vue-ink); font-size: 16px; }
body.expense-mode #shot_preview { max-height: 25vh !important; }
body.expense-mode #shot_wrap > div { display: none; }
body.expense-mode #d_foto_box { border: 0 !important; padding: 0 !important; }
body.expense-mode .sheet #rsub { position: static; box-shadow: none; }
:root {
  --vue-surface: #fff;
  --vue-bg: #f7f8fa;
  --vue-ink: #142033;
  --vue-muted: #667184;
  --vue-line: #dee3eb;
  --vue-soft: #edf3ff;
  --vue-blue: #245fe5;
  --vue-navy: #101d31;
  --vue-cyan: #9bbcff;
  --ok: #13805a;
  --err: #c33443;
  color-scheme: light;
}
html, body { background: var(--vue-bg); color: var(--vue-ink); -webkit-font-smoothing: antialiased; }
body { --vue-notice-space: 0px; }
body:has(#fila_badge:not([style*="display:none"]):not([style*="display: none"])) { --vue-notice-space: 64px; }
button, input, select, textarea { font-family: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #84aaff; outline-offset: 3px;
}
button:disabled { cursor: default; opacity: .55; }
input::placeholder, textarea::placeholder { color: #6e7c91; opacity: 1; }
#app {
  max-width: 820px; margin: 0 auto; background: var(--vue-surface);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  box-shadow: 0 0 0 1px var(--vue-line);
}
#video {
  position: relative; inset: auto; grid-row: 3; grid-column: 1;
  min-width: 0; min-height: 0; width: calc(100% - 32px); height: 100%;
  justify-self: center; border-radius: 22px; background: var(--vue-navy);
}
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topbar {
  position: relative; grid-row: 1; min-height: calc(env(safe-area-inset-top) + 84px + var(--vue-notice-space));
  padding: calc(env(safe-area-inset-top) + 22px + var(--vue-notice-space)) 164px 18px 24px;
  background: var(--vue-surface); color: var(--vue-ink); gap: 10px;
}
.brand { min-width: 0; }
.brand-logo { display: block; width: 116px; height: auto; }
.userbadge {
  top: calc(env(safe-area-inset-top) + 21px + var(--vue-notice-space)); right: 24px; min-height: 44px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--vue-muted); padding: 4px 0 4px 6px; gap: 8px; font-size: 12px;
  font-family: inherit; text-align: left; backdrop-filter: none;
}
.userbadge .who { max-width: 80px; }
.userbadge .tipo { display: grid; place-items: center; width: 30px; height: 30px; color: #435570; background: #eef1f5; border-radius: 50%; padding: 0; font-size: 10px; }
.modes {
  position: relative; grid-row: 2; top: auto; left: auto; right: auto;
  gap: 18px; padding: 0 24px 16px; background: var(--vue-surface);
  border-bottom: 0; min-width: 0;
}
.chip {
  position: relative; min-height: 42px; padding: 8px 2px; border-radius: 0;
  font-size: 14px; font-weight: 500; letter-spacing: -.15px;
  color: var(--vue-muted); background: transparent; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { color: var(--vue-blue); }
.chip.active { background: transparent; color: var(--vue-blue); box-shadow: none; font-weight: 650; }
.chip.active::after { content: ""; position: absolute; height: 2px; background: currentColor; bottom: 0; left: 2px; right: 2px; border-radius: 2px; }
#app > .hint {
  position: relative; grid-row: 3; grid-column: 1; align-self: start;
  top: auto; left: auto; right: auto; justify-self: center; max-width: calc(100% - 72px);
  padding: 9px 16px; margin-top: 16px; border-radius: 14px;
  background: #101d31a6; border: 1px solid #ffffff1a;
  font-size: 13px; line-height: 1.4; font-weight: 500; text-shadow: none;
  pointer-events: none;
}
#app > .hint small { font-size: 11px; line-height: 1.4; opacity: 1; color: #e0e7f1; margin-top: 3px; font-weight: 400; }
.frame, .frame.insp {
  grid-row: 3; grid-column: 1; align-self: center; justify-self: center;
  position: relative; left: auto; top: auto; transform: none;
  width: min(70vw, 320px, 31dvh); max-width: none; margin: 48px 0 12px;
  border-radius: 16px; box-shadow: none;
}
.frame.insp { width: min(66vw, 280px, 30dvh); margin-top: 52px; }
.frame.locked { box-shadow: none; }
.corner { width: 26px; height: 26px; border-width: 2px; border-color: #f4f7ffcc; }
.scanline { height: 2px; box-shadow: none; }
.controls {
  grid-row: 4; grid-column: 1; position: relative; left: auto; right: auto; bottom: auto;
  padding: 14px 24px calc(env(safe-area-inset-bottom) + 20px);
  gap: 10px; background: var(--vue-surface); border-top: 0;
}
.mode-status { font-size: 11px; color: var(--vue-muted); gap: 6px; }
.dot { width: 6px; height: 6px; background: var(--vue-blue); animation: none; }
.shutter {
  width: 68px; height: 68px; border: 5px solid #fff; background: var(--vue-blue);
  outline: 2px solid #8dabf7; box-shadow: 0 4px 12px #245fe51c;
}
.shutter-label { font-size: 11px; line-height: 1.4; color: var(--vue-muted); opacity: 1; text-align: center; }
#insp_scanbox { width: 100%; max-width: 460px; margin: 0 0 1px; }
.iseg { width: 216px; max-width: 100%; margin: 0 auto 12px; padding: 3px; gap: 2px; border: 0; border-radius: 10px; background: #f0f2f6; }
.iseg button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 8px 10px; border-radius: 8px; background: transparent; color: var(--vue-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.iseg .ui-icon { width: 16px; height: 16px; }
.iseg button.on-ent, .iseg button.on-sai { background: #fff; color: var(--vue-ink); box-shadow: 0 1px 4px #1420331a; }
.inspection-reference { padding: 7px 14px; border: 1px solid var(--vue-line); border-radius: 12px; background: var(--vue-bg); }
#insp_semlogin { padding: 9px 11px !important; border: 1px solid #eadab7; background: #fff6e4 !important; color: #745219 !important; font-size: 12px !important; line-height: 1.5 !important; }
#i_container_scan, #i_oc {
  min-height: 34px; padding: 4px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--vue-ink); font-size: 16px; letter-spacing: .1px; text-align: left;
}
#i_container_scan { font-weight: 600; }
#i_oc { margin-top: 0; font-size: 13px; font-weight: 400; color: var(--vue-muted); }
#i_container_scan.faltando, #xf_placa.faltando { border-color: var(--err); box-shadow: 0 0 0 2px #c334431a; }
.btn-painel, .btn-flash {
  bottom: calc(env(safe-area-inset-bottom) + 48px); width: 72px; height: 56px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--vue-muted); box-shadow: none; font-size: 22px;
}
.btn-painel.show, .btn-flash.show { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.btn-painel span, .btn-flash span { font: 400 11px/1.2 system-ui, sans-serif; }
.btn-flash { left: max(36px, calc((100vw - 620px) / 2)); }
.btn-painel { right: max(36px, calc((100vw - 620px) / 2)); }
.btn-flash.on { color: #795109; background: #fff2d0; border-color: #ead7a7; }
.sheet { z-index: 30; background: #0e1b2c99; color: var(--vue-ink); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.sheet > .sheet-inner {
  width: 100%; max-width: 560px; align-self: center; background: var(--vue-surface);
  border: 1px solid var(--vue-line); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 20px); max-height: calc(92dvh - var(--vue-notice-space));
  box-shadow: 0 -8px 35px #06152c1f; overscroll-behavior: contain;
}
.sheet .handle { width: 38px; background: #cad4e3; margin-bottom: 16px; }
.sheet h2 { color: var(--vue-ink); font-size: 22px; line-height: 1.3; letter-spacing: -.3px; }
.sheet .sub { max-width: 420px; font-size: 14px; line-height: 1.5; opacity: 1; color: var(--vue-muted); margin: 7px 0 18px; }
/* Keep send feedback readable after the operator scrolls down to the action. */
.sheet #rsub { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--vue-surface); box-shadow: 0 -12px 0 var(--vue-surface); }
.sheet .sub.alerta { color: #a22c3a; }
.badge { width: 54px; height: 54px; margin-bottom: 12px; }
.badge.ok { background: #e8f6ef; border-color: #b6dfca; color: #13805a; }
.badge.info { background: var(--vue-soft); border-color: #c4d6fb; color: var(--vue-blue); }
.badge.alerta { background: #fff0f1; border-color: #f0c3c8; color: var(--err); }
.data { max-width: none; background: var(--vue-bg); border-color: var(--vue-line); padding: 3px 14px; margin-bottom: 14px; }
.data .row { font-size: 13px; gap: 14px; padding: 11px 0; border-color: var(--vue-line); }
.data .row span:first-child { opacity: 1; color: var(--vue-muted); letter-spacing: 0; }
.data .row span:last-child { font-family: inherit; overflow-wrap: anywhere; word-break: normal; }
.btns { max-width: none; gap: 9px; margin-top: 16px; }
.btn { min-height: 48px; font-size: 15px; font-weight: 650; padding: 13px 16px; letter-spacing: 0; border-radius: 11px; }
.btn-primary { background: var(--vue-blue); box-shadow: none; color: #fff; }
.btn-ghost { background: var(--vue-bg); border: 1px solid var(--vue-line); color: var(--vue-ink); }
.btn-ghost:active { background: var(--vue-soft); }
#shot_wrap, #insp_galeria_box, #inspecao_form, #deposito_form, #despesa_form { width: 100%; }
#shot_preview { background: var(--vue-bg) !important; border-color: var(--vue-line) !important; }
#sheet input:not([type="file"]), #sheet select {
  min-width: 0; min-height: 48px; padding: 11px 12px !important;
  border: 1px solid var(--vue-line) !important; border-radius: 10px !important;
  background: var(--vue-bg) !important; color: var(--vue-ink) !important; font-size: 16px !important;
}
#sheet :is(#inspecao_form, #deposito_form, #despesa_form) div[style*="font-size:12px"] { opacity: 1 !important; font-size: 13px !important; color: var(--vue-muted); line-height: 1.5; }
#sheet :is(#inspecao_form, #deposito_form, #despesa_form) span[style*="opacity"] { opacity: 1 !important; }
#d_foto_box { background: var(--vue-bg); border-color: #bdcde3 !important; padding: 12px !important; }
#insp_galeria_btn { width: 100%; min-height: 46px; padding: 10px; border: 1px solid var(--vue-line); border-radius: 10px; background: var(--vue-bg); color: var(--vue-blue); font: 600 14px/1.4 system-ui; }
#insp_galeria_info { color: var(--vue-muted); font-size: 12px; line-height: 1.5; }
.fila-badge { top: calc(env(safe-area-inset-top) + 7px); left: max(10px, calc((100vw - 780px) / 2)); right: max(10px, calc((100vw - 780px) / 2)); background: #fff1cd; color: #654407; border: 1px solid #e6cf95; font-size: 13px; font-weight: 600; box-shadow: 0 3px 14px #1d35521a; }
.fila-badge.ok { background: #e8f6ee; border-color: #b9dcc8; color: #126b48; }
.fila-badge[role="button"] { pointer-events: auto; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.fila-badge[role="button"]:focus-visible { outline: 3px solid var(--vue-blue); outline-offset: 2px; }
.err { background: var(--vue-navy); color: #f4f7fd; }
.err h3 { font-size: 22px; line-height: 1.3; }
.err p { font-size: 15px; line-height: 1.6; opacity: 1; color: #c9d8ec; }
.cam-shoot .cs-cancel { min-height: 44px; border-radius: 12px; background: #101d31ed; font-size: 14px; backdrop-filter: none; }
.cam-shoot .cs-target { border: 2px solid #dce7fb; border-radius: 16px; }
.cam-shoot .cs-fire { background: var(--vue-blue); box-shadow: 0 0 0 4px #ffffffeb; border: 4px solid #fff; width: 72px; height: 72px; }
.cam-shoot .cs-hint { font-size: 14px; line-height: 1.5; }
/* A form capture uses the full camera canvas beneath its dedicated controls. */
body:has(#cam_shoot.show) #video { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; border-radius: 0; z-index: 80; object-fit: contain; }
body:has(#cam_shoot.show) #app > .hint,
body:has(#cam_shoot.show) #frame { visibility: hidden; }
body:has(#cam_shoot.show, #sheet.show, #gate.show, .xform.show, .painel.show, #foto_zoom.show, #rem_foto.show) :is(.btn-painel, .btn-flash) { visibility: hidden; }
.cam-shoot .cs-target { width: min(80vw, 52dvh, 380px); box-shadow: none; }
.cam-shoot .cs-hint { left: 50%; right: auto; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: #101d31df; text-shadow: none; }
@media (max-width: 380px) {
  .topbar { padding-left: 14px; padding-right: 142px; gap: 8px; }
  .brand-logo { width: 108px; }
  .userbadge { right: 12px; padding: 8px; }
  .userbadge .who { max-width: 60px; }
  .modes { padding-left: 18px; gap: 16px; }
  .chip { padding: 9px 2px; font-size: 13px; }
  .controls { padding-left: 14px; padding-right: 14px; }
  .frame.insp { width: min(62vw, 29dvh); margin-top: 52px; }
}
@media (min-width: 768px) {
  .topbar { padding-left: 26px; }
  .modes { flex-wrap: wrap; gap: 8px; padding-left: 24px; padding-right: 24px; overflow: visible; }
  .modes::after { display: none; }
  .modes .chip { min-height: 42px; padding: 8px 12px; gap: 8px; border: 1px solid var(--vue-line); border-radius: 10px; color: var(--vue-ink); }
  .modes .chip:hover { background: var(--vue-bg); border-color: #c4d6fb; color: var(--vue-blue); }
  .modes .chip.active { background: var(--vue-soft); border-color: #c4d6fb; color: var(--vue-blue); }
  .modes .chip.active::after { display: none; }
  .frame { width: min(46vw, 360px, 35dvh); }
  .frame.insp { width: min(33vw, 280px, 27dvh); }
  .controls { padding-top: 16px; }
  .sheet { justify-content: center; padding: 24px; }
  .sheet > .sheet-inner { border: 1px solid var(--vue-line); border-radius: 22px; max-height: calc(90dvh - var(--vue-notice-space)); }
}
@media (max-height: 680px) and (orientation: portrait) {
  .topbar { min-height: calc(env(safe-area-inset-top) + 68px + var(--vue-notice-space)); padding-top: calc(env(safe-area-inset-top) + 10px + var(--vue-notice-space)); padding-bottom: 10px; }
  .userbadge { top: calc(env(safe-area-inset-top) + 12px + var(--vue-notice-space)); }
  .controls { gap: 7px; padding-top: 9px; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .shutter { width: 60px; height: 60px; }
  .btn-painel, .btn-flash { bottom: calc(env(safe-area-inset-bottom) + 45px); }
  .frame.insp { width: min(39vw, 16dvh); margin-top: 66px; }
  #app > .hint { padding-top: 10px; font-size: 13px; }
  #app > .hint small { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #app { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto minmax(0, 1fr); }
  .topbar, .modes { grid-column: 1 / -1; }
  .topbar { min-height: calc(60px + var(--vue-notice-space)); padding-top: calc(9px + var(--vue-notice-space)); padding-bottom: 9px; }
  .userbadge { top: calc(8px + var(--vue-notice-space)); }
  .modes { padding-bottom: 8px; }
  .chip { min-height: 40px; }
  #video { width: calc(100% - 20px); border-radius: 16px; }
  .controls { grid-column: 2; grid-row: 3; justify-content: center; padding: 10px; border-top: 0; border-left: 1px solid var(--vue-line); gap: 8px; overflow-y: auto; }
  #insp_scanbox.show { display: block; width: 100%; }
  .iseg { margin-bottom: 7px; }
  #i_container_scan, #i_oc { width: 100%; min-height: 32px; padding: 4px 0; }
  #i_oc { margin-top: 0; }
  .frame, .frame.insp { width: min(21vw, 30dvh); margin: 42px 0 0; }
  #app > .hint { font-size: 12px; padding: 8px 12px; }
  #app > .hint small { font-size: 11px; }
  .shutter { width: 56px; height: 56px; }
  .shutter-label { font-size: 11px; }
  .mode-status { max-width: 100%; text-align: center; font-size: 11px; line-height: 1.35; }
  .btn-painel { right: max(212px, calc((100vw - 820px) / 2 + 212px)); bottom: 16px; width: 44px; height: 44px; }
  .btn-flash { left: auto; right: max(20px, calc((100vw - 820px) / 2 + 20px)); bottom: 16px; width: 44px; height: 44px; }
  .cam-shoot .cs-hint { top: 14px; bottom: auto; max-width: 50vw; font-size: 12px; }
  .cam-shoot .cs-fire { top: 50%; left: auto; right: 24px; bottom: auto; transform: translateY(-50%); }
  .cam-shoot .cs-fire:active { transform: translateY(-50%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}