/* Estilos customizados para LCam & Check - Engenharia & Vistorias */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;600;700&display=swap');

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input, textarea, [contenteditable="true"] {
  user-select: text;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b0f17;
  color: #f1f5f9;
  overflow-x: hidden;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Scrollbars modernos e finos */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.6);
}

/* Fontes Selecionáveis para o Carimbo / Overlay */
.font-mono-code {
  font-family: 'JetBrains Mono', monospace !important;
}
.font-sans-clean {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.font-condensed {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.5px;
}
.font-inter {
  font-family: 'Inter', sans-serif !important;
}

/* Fontes disponíveis no DOM e na composição Canvas do carimbo.
   Fontes do sistema não exigem rede; famílias web antigas preservadas por compatibilidade. */
.font-arial { font-family: Arial, Helvetica, sans-serif !important; }
.font-roboto { font-family: Roboto, "Arial", sans-serif !important; }
.font-courier { font-family: "Courier New", Courier, monospace !important; }
.font-serif { font-family: Georgia, "Times New Roman", serif !important; }

/* Banner Google AdMob Placeholder Exato 320x50 */
.admob-banner-placeholder {
  width: 320px;
  height: 50px;
  min-width: 320px;
  min-height: 50px;
  max-width: 320px;
  max-height: 50px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
}

.admob-banner-placeholder::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(245, 158, 11, 0.08) 50%, transparent 60%);
  animation: shine 4s infinite linear;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Retículo de Câmera / Mira de Nível */
.camera-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.camera-crosshair::before, .camera-crosshair::after {
  content: '';
  position: absolute;
  background-color: #f59e0b;
}

.camera-crosshair::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.camera-crosshair::after {
  top: 50%;
  left: 0;
  height: 2px;
  width: 100%;
  transform: translateY(-50%);
}

/* Estrutura Principal e Contenção Estrita do Viewport da Câmera */
html, body {
  height: 100% !important;
  height: 100dvh !important;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  background-color: #0b0f17;
}

#app-root {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #0b0f17;
}

#camera-header {
  flex-shrink: 0 !important;
  width: 100% !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
}

#app-main {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

#screen-camera {
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #000000 !important;
}

#screen-camera:not(.hidden) {
  display: flex !important;
}

#screen-camera.hidden,
#screen-report.hidden,
.hidden {
  display: none !important;
}

#screen-camera.hidden #camera-container,
#screen-camera.hidden #camera-video {
  display: none !important;
}

/* Tela do Relatório: Rolagem Vertical Completa e Independente */
#screen-report {
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  box-sizing: border-box !important;
  padding-bottom: 120px !important;
}

#screen-report:not(.hidden) {
  display: flex !important;
}

#camera-container {
  position: relative !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #000000 !important;
}

#camera-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Barra de Navegação Inferior (3 Botões Uniformes com Shutter Central) */
#app-bottom-nav,
.bottom-nav {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  box-sizing: border-box !important;
  background-color: rgba(11, 15, 23, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(30, 41, 59, 0.85) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
}

/* Carimbo: tipografia organizada e fiel às fontes escolhidas. */
#camera-stamp-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 31;
  pointer-events: none;
}
/* HTML auxiliar não é mais uma segunda versão visual do carimbo.
   O Canvas acima desenha exatamente os mesmos glifos exportados no JPEG. */
#camera-overlay { opacity: 0 !important; pointer-events: none !important; }
#camera-overlay, .camera-overlay {
  position: absolute !important;
  z-index: 30 !important;
  bottom: 12px !important; left: 10px !important; right: 10px !important; top: auto !important;
  transform: none !important;
  margin: 0 !important; padding: 8px 10px !important;
  width: auto !important; max-width: calc(100% - 20px);
  height: auto !important; max-height: none;
  overflow: visible !important; box-sizing: border-box;
  border-radius: 8px;
  --overlay-scale: 1;
  --stamp-stroke: rgba(5, 10, 17, .75);
  --stamp-shadow: 0 1px 3px rgba(0,0,0,.75);
  font-size: calc(11px * var(--overlay-scale)) !important;
  line-height: 1.36 !important;
  letter-spacing: .01em;
  text-align: left;
  pointer-events: auto;
}
#overlay-header-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 0;
}
#camera-overlay * {
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  -webkit-text-stroke: 0.35px var(--stamp-stroke) !important;
  text-shadow: var(--stamp-shadow) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 0;
}
#camera-overlay #overlay-project-tag {
  display: block;
  font-size: calc(12px * var(--overlay-scale)) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  max-width: 100%;
}
#camera-overlay #overlay-datetime {
  font-family: inherit !important;
  font-size: calc(12px * var(--overlay-scale)) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .015em !important;
  white-space: nowrap !important;
}
#camera-overlay .overlay-date-container {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%; background: transparent !important;
}
#camera-overlay .overlay-date-container svg {
  width: 13px; height: 13px; flex-shrink: 0;
  filter: drop-shadow(0 1px 1px #000);
}
#camera-overlay .overlay-tag-container { max-width: 100%; }
#camera-overlay #overlay-location-block {
  max-width: 100%; border-top-color: rgba(245, 158, 11, .28) !important;
}
#camera-overlay #overlay-coords, #camera-overlay #overlay-address,
#camera-overlay #overlay-altitude, #camera-overlay #overlay-additional-info {
  font-size: calc(10px * var(--overlay-scale)) !important;
}
/* Contraste por tema: nunca sobrepor texto preto em fundo claro com contorno preto grosso. */
.overlay-theme-transparent-outline {
  background: transparent !important; border: 0 !important;
  color: #fff !important; box-shadow: none !important;
  backdrop-filter: none !important;
}
.overlay-theme-transparent-outline #overlay-project-tag { color: #fbbf24 !important; }
.overlay-theme-dark {
  background: rgba(15,23,42,.78) !important; border: 1px solid rgba(245,158,11,.32) !important;
  --stamp-stroke: transparent; --stamp-shadow: 0 1px 2px rgba(0,0,0,.45);
  color: #fff !important;
}
.overlay-theme-dark #overlay-project-tag { color: #fbbf24 !important; }
.overlay-theme-light {
  background: rgba(248,250,252,.92) !important; border: 1px solid rgba(15,23,42,.15) !important;
  --stamp-stroke: transparent; --stamp-shadow: none; color: #0f172a !important;
}
.overlay-theme-light #camera-overlay, .overlay-theme-light span,
.overlay-theme-light #overlay-datetime, .overlay-theme-light #overlay-address,
.overlay-theme-light #overlay-coords { color: #0f172a !important; }
.overlay-theme-light #overlay-project-tag { color: #92400e !important; }
.overlay-theme-yellow {
  background: rgba(245,158,11,.90) !important; border: 1px solid rgba(120,53,15,.25) !important;
  --stamp-stroke: transparent; --stamp-shadow: none; color: #0f172a !important;
}
.overlay-theme-yellow span, .overlay-theme-yellow #overlay-project-tag,
.overlay-theme-yellow #overlay-datetime { color: #0f172a !important; }
@media (max-width: 380px) {
  #camera-overlay, .camera-overlay { padding: 7px 8px !important; bottom: 8px !important; }
  #camera-overlay #overlay-datetime { font-size: calc(11px * var(--overlay-scale)) !important; }
}

/* Estilos do Botão Obturador Central da Bottom Nav (Shutter Integrado) */
.nav-camera-shutter-btn {
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
  transition: transform 0.15s ease;
  position: relative !important;
  top: -16px !important;
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
}

/* Alternância de Modo: Câmera (Shutter Bolinha) vs Relatório (Aba) */
.nav-camera-shutter-btn.mode-camera .camera-shutter-circle-wrap {
  display: flex !important;
}
.nav-camera-shutter-btn.mode-camera .camera-tab-nav-wrap {
  display: none !important;
}
.nav-camera-shutter-btn.mode-camera {
  top: -16px !important;
}

.nav-camera-shutter-btn.mode-tab .camera-shutter-circle-wrap {
  display: none !important;
}
.nav-camera-shutter-btn.mode-tab .camera-tab-nav-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-camera-shutter-btn.mode-tab {
  top: 0px !important;
  margin-bottom: 0px !important;
}

/* ============================================================ */
/* A BOLINHA QUE TODOS CONHECEM PARA TIRAR FOTO (SHUTTER NATIVO) */
/* ============================================================ */
.camera-shutter-circle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

/* Anel externo branco de 68px */
.camera-shutter-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.35);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* O disco circular sólido no centro (a bolinha branca que todos conhecem) */
.camera-shutter-disc {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.1s ease;
}

/* Feedback tátil ao tirar foto */
.nav-camera-shutter-btn:active .camera-shutter-disc,
.nav-camera-shutter-btn.shutter-triggered .camera-shutter-disc {
  transform: scale(0.84) !important;
  background-color: #f59e0b !important;
}

.nav-camera-shutter-btn:active .camera-shutter-ring,
.nav-camera-shutter-btn.shutter-triggered .camera-shutter-ring {
  transform: scale(0.96) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.8) !important;
}

/* Animação do Flash ao Tirar Foto */
@keyframes flashEffect {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.camera-flash-overlay {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
}

.camera-flash-overlay.active {
  animation: flashEffect 0.35s ease-out;
}

/* Campo editável inline na sobreposição */
.editable-field {
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  cursor: text;
  display: inline-block;
  min-width: 30px;
}

.editable-field:hover, .editable-field:focus {
  border-bottom-color: currentColor;
  background-color: rgba(245, 158, 11, 0.15);
  border-radius: 2px;
}

/* Indicador de Bússola */
.compass-dial {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Toast de Notificação */
.toast-notice {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Badges e Dropdowns Semânticos de Conformidade Técnica */
.status-select-conforme,
.badge-status-conforme {
  color: #22c55e !important;
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}
.status-select-conforme option {
  background-color: #0f172a;
  color: #22c55e;
}

.status-select-alerta,
.badge-status-alerta {
  color: #eab308 !important;
  background-color: rgba(234, 179, 8, 0.15) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
}
.status-select-alerta option {
  background-color: #0f172a;
  color: #eab308;
}

.status-select-nao-conforme,
.badge-status-nao-conforme {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.status-select-nao-conforme option {
  background-color: #0f172a;
  color: #ef4444;
}

.status-select-default,
.badge-status-default {
  color: #94a3b8 !important;
  background-color: rgba(148, 163, 184, 0.15) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}
.status-select-default option {
  background-color: #0f172a;
  color: #94a3b8;
}

/* Prevenção de corte em telas móveis */
.safe-padding-bottom {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* ============================================================== */
/* LAYOUT NATIVO PARA AS CONFIGURAÇÕES DO CARIMBO (STICKY FOOTER) */
/* ============================================================== */
.settings-modal-screen,
#modal-overlay-settings-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .settings-modal-screen,
  #modal-overlay-settings-content {
    height: 90vh !important;
    max-height: 850px !important;
  }
}

.settings-scroll-body,
#settings-scroll-body {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 20px !important;
}

.settings-sticky-footer,
#settings-sticky-footer {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #0f172a !important;
  padding: 15px !important;
  border-top: 1px solid #1e293b !important;
  z-index: 50 !important;
}


/* Captura direta no relatório (navegador/PWA). Isolada da câmera da aba principal. */
#report-camera-modal.report-camera-modal { position:fixed; inset:0; z-index:100; background:rgba(4,8,16,.97); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); }
#report-camera-modal.report-camera-modal.hidden { display:none !important; }
.report-camera-panel { width:min(100%,32rem); height:min(100%,100dvh); display:flex; flex-direction:column; min-height:0; background:#0b1020; }
.report-camera-heading { flex:none; display:flex; align-items:center; justify-content:space-between; color:#f8fafc; padding:1rem; gap:1rem; }
.report-camera-heading button { background:#1e293b; border-radius:.55rem; padding:.55rem .8rem; font-size:.85rem; }
.report-camera-preview { flex:1; min-height:0; background:#020617; display:flex; justify-content:center; align-items:center; overflow:hidden; }
#report-camera-video { width:100%; height:100%; display:block; object-fit:cover; }
.report-camera-hint { flex:none; text-align:center; color:#cbd5e1; font-size:.78rem; padding:.7rem 1.2rem; }
.report-camera-actions { flex:none; display:flex; justify-content:center; padding:1rem 1rem max(1.25rem, env(safe-area-inset-bottom,0px)); }
#report-camera-shutter { min-height:3.35rem; min-width:11rem; color:#090d16; background:#f59e0b; border-radius:999px; font-weight:800; padding:.8rem 1.5rem; }
#report-camera-shutter:disabled { opacity:.5; }

/* Prévia e JPEG compartilham o recorte object-fit:cover e o mesmo Canvas. */
.report-camera-preview { position:relative; }
#report-camera-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#report-camera-native[hidden] { display:none; }
.report-camera-hint { margin:0; padding:.35rem 1rem; }
#report-camera-sensor-status { color:#fbbf24; }
.evidence-photo { background:#020617; display:flex; justify-content:center; }
.evidence-photo img { width:100%; max-height:360px; object-fit:contain; }
.evidence-metadata { display:flex; flex-direction:column; gap:.25rem; padding:.75rem 1rem; background:#0f172a; font-size:11px; color:#cbd5e1; overflow-wrap:anywhere; }
.evidence-metadata strong { color:#fbbf24; }
.evidence-metadata button { align-self:flex-start; color:#93c5fd; padding:.35rem 0; text-decoration:underline; }
@media (orientation:landscape) and (max-height:500px) {
  .report-camera-panel { width:100%; }
  .report-camera-heading, .report-camera-actions { padding:.35rem .75rem; }
  .report-camera-hint { font-size:10px; padding:.1rem .5rem; }
  #report-camera-shutter { min-height:2rem; padding:.3rem 1rem; }
}

/* Diálogo crítico independente do build do Tailwind. */
#modal-clear-report { z-index: 110; }
#modal-clear-report.hidden { display: none !important; }
#btn-confirm-clear-report:disabled { opacity: .4; cursor: not-allowed; }
#report-photos-list [data-report-photo-capture],
#report-photos-list [data-report-photo-gallery] { min-height: 44px; }


/* Vistoria mobile: o cabeçalho de ações nunca ultrapassa a largura da tela. */
#screen-report .report-photo-toolbar { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; min-width:0; }
#screen-report .report-photo-toolbar-heading { display:flex; flex-wrap:wrap; align-items:center; gap:9px; min-width:0; }
#screen-report .report-photo-toolbar-actions { display:flex; gap:8px; min-width:0; }
#screen-report .report-photo-toolbar-danger { display:flex; justify-content:flex-end; min-width:0; }
#screen-report .report-toolbar-button { display:inline-flex; flex:1 1 0; min-width:0; align-items:center; justify-content:center; gap:6px; min-height:39px; padding:8px 12px; border-radius:9px; font-size:12px; font-weight:650; white-space:nowrap; }
#screen-report .report-toolbar-button--gallery { background:#1e293b; color:#e2e8f0; border:1px solid #334155; }
#screen-report .report-toolbar-button--camera { background:#f59e0b; color:#111827; border:1px solid #f59e0b; }
#screen-report .report-clear-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; min-height:35px; padding:6px 10px; color:#fda4af; border:1px solid rgba(251,113,133,.28); background:rgba(136,19,55,.07); border-radius:9px; font-size:11px; font-weight:600; white-space:nowrap; }
#screen-report .report-clear-action:focus-visible, #screen-report .report-toolbar-button:focus-visible { outline:2px solid #fbbf24; outline-offset:2px; }
@media (min-width:480px) { #screen-report .report-photo-toolbar { grid-template-columns:minmax(0,1fr) auto; } #screen-report .report-photo-toolbar-heading { grid-column:1/-1; } #screen-report .report-toolbar-button { flex:0 0 auto; } }

/* Modal slim: tamanho explícito, safe-area, sem overflow de input ou botões. */
#modal-clear-report.clear-report-backdrop { position:fixed; inset:0; z-index:110; width:100%; max-width:100vw; display:flex; justify-content:center; align-items:center; overflow-y:auto; overscroll-behavior:contain; background:rgba(2,6,23,.82); backdrop-filter:blur(5px); padding:max(16px, env(safe-area-inset-top, 0px)) 12px max(16px,env(safe-area-inset-bottom,0px)); box-sizing:border-box; }
#modal-clear-report .clear-report-dialog { box-sizing:border-box; min-width:0; width:100%; max-width:362px; max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; border:1px solid #334155; border-radius:16px; padding:18px; background:#0f172a; box-shadow:0 16px 48px rgba(0,0,0,.42); color:#f8fafc; }
#modal-clear-report .clear-report-title-row { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
#modal-clear-report .clear-report-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:rgba(190,24,93,.12); color:#fda4af; }
#modal-clear-report #clear-report-heading { margin:0; font-size:16px; line-height:1.3; font-weight:700; }
#modal-clear-report .clear-report-subtitle { font-size:11px; color:#94a3b8; margin:2px 0 0; }
#modal-clear-report .clear-report-warning { margin:0 0 15px; color:#cbd5e1; font-size:12px; line-height:1.55; overflow-wrap:break-word; }
#modal-clear-report .clear-report-label { display:block; font-size:12px; line-height:1.45; color:#cbd5e1; margin-bottom:7px; }
#modal-clear-report .clear-report-label strong { color:#fda4af; }
#modal-clear-report .clear-report-input { box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%; background:#020617; border:1px solid #475569; border-radius:9px; color:white; font-size:16px; line-height:1.3; padding:11px 12px; outline:none; }
#modal-clear-report .clear-report-input:focus-visible { border-color:#fda4af; box-shadow:0 0 0 2px rgba(251,113,133,.15); }
#modal-clear-report .clear-report-feedback { min-height:15px; margin:7px 0 12px; font-size:11px; line-height:1.35; color:#fda4af; }
#modal-clear-report .clear-report-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; min-width:0; }
#modal-clear-report .clear-report-actions button { box-sizing:border-box; min-width:0; width:100%; min-height:42px; padding:9px 5px; border-radius:9px; font-size:12px; line-height:1.25; font-weight:650; white-space:normal; overflow-wrap:anywhere; }
#modal-clear-report .clear-report-cancel { background:#1e293b; color:#e2e8f0; border:1px solid #334155; }
#modal-clear-report .clear-report-confirm { background:#be123c; color:#fff; border:1px solid #be123c; }
#modal-clear-report .clear-report-confirm:disabled { opacity:.34; cursor:not-allowed; }
@media (max-width:350px) { #modal-clear-report .clear-report-dialog { padding:14px; } }

/* Catálogo técnico offline: seletor móvel com foco, busca, categorias e chips. */
#screen-report .report-form-textarea { resize:vertical; min-height:74px; }
#screen-report .norms-selector { background:rgba(15,23,42,.45); border:1px solid #263449; border-radius:12px; padding:12px; min-width:0; }
#screen-report .norms-selector-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
#screen-report .norms-selector-header > div { min-width:0; }
#screen-report .norms-selector h3 {font-size:12px; color:#e2e8f0; font-weight:700; margin:0;}
#screen-report .norms-selector p {font-size:11px; color:#94a3b8; line-height:1.5; margin:3px 0 0;}
#screen-report .norms-open-button { flex:0 0 auto; min-height:39px; padding:8px 12px; border-radius:9px; font-size:12px; font-weight:700; color:#101827; background:#f59e0b; }
#screen-report .norms-selected {display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; min-width:0;}
#screen-report .norms-empty {font-size:11px; color:#94a3b8;}
#screen-report .norms-chip { display:inline-flex; align-items:center; max-width:100%; background:#1e293b; border:1px solid #334155; border-radius:999px; color:#e2e8f0; font-size:11px; padding:4px 4px 4px 9px; gap:5px; }
#screen-report .norms-chip > span {overflow-wrap:anywhere;}
#screen-report .norms-chip button {flex:0 0 23px; min-height:25px; border-radius:50%; background:#334155; color:#e2e8f0; font-size:16px; }
#modal-norms.norms-backdrop {position:fixed; inset:0; z-index:115; display:flex; align-items:flex-end; justify-content:center; padding:0; background:rgba(2,6,23,.85); box-sizing:border-box;}
#modal-norms.hidden {display:none !important;}
#modal-norms .norms-dialog {width:100%; max-width:540px; height:min(93dvh,880px); min-height:0; display:flex; flex-direction:column; background:#101827; color:#f1f5f9; border:1px solid #334155; border-radius:18px 18px 0 0; overflow:hidden;}
#modal-norms .norms-dialog-heading {display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:16px 16px 10px; flex:0 0 auto;}
#modal-norms .norms-dialog-heading h2 {font-size:17px; font-weight:750; margin:0 0 3px;}
#modal-norms .norms-dialog-heading p {font-size:11px; line-height:1.4; color:#94a3b8;}
#modal-norms #btn-close-norms {flex:0 0 38px; min-height:38px; background:#1e293b; border-radius:9px;}
#modal-norms .norms-search-wrap {padding:0 16px 10px; flex:0 0 auto;}
#modal-norms .norms-search-wrap label,#modal-norms .norms-custom-section label {display:block; color:#cbd5e1; font-size:11px; margin-bottom:5px;}
#modal-norms input[type="search"],#modal-norms input[type="text"] {width:100%; min-width:0; background:#020617; border:1px solid #475569; border-radius:9px; padding:10px 12px; color:white; font-size:16px; outline:none; box-sizing:border-box;}
#modal-norms input:focus-visible,#modal-norms button:focus-visible {outline:2px solid #f59e0b; outline-offset:1px;}
#modal-norms .norms-count {display:block; font-size:11px; color:#fbbf24; padding-top:5px;}
#modal-norms .norms-catalog-results {flex:1 1 auto; overflow-y:auto; min-height:0; overscroll-behavior:contain; padding:0 16px 12px; -webkit-overflow-scrolling:touch;}
#modal-norms .norms-result-group {margin-top:10px; border-radius:10px; border:1px solid #263449; overflow:hidden;}
#modal-norms .norms-result-group h3 {padding:9px 11px; background:#172437; color:#fbbf24; font-size:12px; font-weight:700;}
#modal-norms .norms-result-group h3 span {color:#94a3b8; font-size:11px;}
#modal-norms .norms-result {display:flex; align-items:flex-start; gap:10px; padding:11px; border-top:1px solid #223047; cursor:pointer; font-size:12px; line-height:1.4;}
#modal-norms .norms-result input {flex:0 0 18px; width:18px; height:18px; margin:0; accent-color:#f59e0b;}
#modal-norms .norms-result span {flex:1; min-width:0; overflow-wrap:anywhere;}
#modal-norms .norms-result small {display:block; color:#94a3b8; margin-top:3px; font-size:10px;}
#modal-norms .norms-custom-section {flex:0 0 auto; padding:10px 16px; border-top:1px solid #263449;}
#modal-norms .norms-custom-row {display:flex; gap:8px;}
#modal-norms .norms-custom-row input {flex:1;}
#modal-norms #btn-add-custom-norm {background:#334155; padding:8px 10px; border-radius:9px; color:white; font-size:12px; flex:0 0 auto;}
#modal-norms .norms-custom-section p {color:#94a3b8; font-size:10px; margin-top:5px;}
#modal-norms .norms-custom-selected {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-top:1px solid #263449; font-size:12px;}
#modal-norms .norms-custom-selected button {color:#fda4af; font-size:11px;}
#modal-norms .norms-no-results {padding:14px 4px; color:#cbd5e1; font-size:12px;}
#modal-norms .norms-dialog-actions {flex:0 0 auto; padding:10px 16px max(14px,env(safe-area-inset-bottom,0px)); border-top:1px solid #263449; background:#101827;}
#modal-norms #btn-done-norms {width:100%; min-height:43px; border-radius:10px; background:#f59e0b; color:#111827; font-size:13px; font-weight:750;}
@media (min-width:580px) {#modal-norms.norms-backdrop {align-items:center; padding:12px;} #modal-norms .norms-dialog {border-radius:18px; height:min(88dvh,790px);}}
@media (max-width:360px) {#screen-report .norms-selector-header {align-items:flex-start;} #screen-report .norms-open-button {padding:8px 9px;} }
/* Corrige a faixa clara entre o último card e ações de foto, sem linhas brancas. */
#screen-report .report-last-photo-actions {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:8px; padding:10px 12px 12px; margin-top:0; border:0 !important; background:#101b2d; border-radius:0 0 12px 12px; box-sizing:border-box; min-width:0;}
#screen-report .report-last-photo-button {min-width:0; width:100%; min-height:43px; border-radius:9px; padding:9px 5px; font-size:12px; font-weight:700; border:0 !important; box-shadow:none !important; white-space:normal;}
#screen-report .report-last-photo-button--capture {color:#101827; background:#f59e0b;}
#screen-report .report-last-photo-button--gallery {color:#e2e8f0; background:#28364d;}
#screen-report .report-last-photo-button:focus-visible {outline:2px solid #fbbf24; outline-offset:2px;}


/* Contorno de toque para foco; não bloqueia botões nem a prévia do carimbo. */
#camera-container, .report-camera-preview { touch-action: manipulation; }
.camera-focus-indicator {
  pointer-events:none; position:absolute; z-index:35; width:64px; height:64px;
  border:2px solid #fbbf24; border-radius:12px; transform:translate(-50%,-50%);
  opacity:0; box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 10px rgba(0,0,0,.28);
}
.camera-focus-indicator.focus-not-supported { border-color:rgba(226,232,240,.7); }
.camera-focus-indicator.focus-visible { animation:lcam-focus-feedback 1.25s ease-out forwards; }
@keyframes lcam-focus-feedback {
  0% {opacity:.95;transform:translate(-50%,-50%) scale(1.35)}
  30% {opacity:.95;transform:translate(-50%,-50%) scale(1)}
  70% {opacity:.8}
  100% {opacity:0}
}


/* Cabeçalho: identidade visual do aplicativo, substitui as letras LC. */
.app-header-icon { display:block; width:36px; height:36px; object-fit:contain; border:0; border-radius:9px; background:transparent; }
#camera-header > div:first-child { min-width:0; }
#camera-header > div:first-child > div:last-child { min-width:0; }
#camera-header h1 { white-space:nowrap; }
#camera-header p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Botão de data confiável mesmo quando WebView não implementa showPicker(). */
.report-date-trigger { width:100%; min-width:0; display:flex; gap:8px; align-items:center; justify-content:space-between; box-sizing:border-box; height:39px; padding:0 11px; border:1px solid rgba(71,85,105,.85); border-radius:9px; background:#020817; color:#e2e8f0; font-size:12px; text-align:left; cursor:pointer; }
.report-date-trigger svg {width:18px;height:18px;flex:none;color:#fbbf24;}
.report-date-trigger:focus-visible { outline:2px solid #f59e0b; outline-offset:2px; }
.report-date-dialog { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(calc(100vw - 28px), 380px); max-width:380px; max-height:calc(100dvh - 28px); margin:0; padding:0; overflow:auto; border:1px solid #475569; border-radius:16px; background:#101827; color:#e2e8f0; box-shadow:0 18px 65px rgba(0,0,0,.65); z-index:1000; }
.report-date-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(3px); }
.report-date-panel {padding:18px;}
.report-date-panel h3 {font-size:16px;font-weight:700;}
.report-date-panel p {font-size:12px;color:#94a3b8;margin:8px 0 16px;line-height:1.5;}
.report-date-grid {display:grid;grid-template-columns: .85fr 1fr 1.1fr;gap:8px;}
.report-date-grid label {min-width:0;display:flex;flex-direction:column;gap:6px;font-size:12px;}
.report-date-grid select {display:block;width:100%;min-width:0;box-sizing:border-box;padding:10px 6px;border-radius:8px;border:1px solid #475569;background:#020817;color:#f8fafc;font-size:14px;}
.report-date-panel .report-date-error {min-height:12px;color:#fca5a5;margin:8px 0;}
.report-date-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:12px;}
.report-date-actions button {padding:9px 10px;border-radius:9px;min-height:40px;font-size:12px;font-weight:700;}
.report-date-secondary {color:#cbd5e1;background:#1e293b;}
.report-date-primary {background:#f59e0b;color:#0f172a;}
@media(max-width:360px) { .report-date-panel{padding:14px;} .report-date-actions button{flex:1;min-width:0;} }

/* Estado GPS independente do carimbo e da fotografia exportada. */
#camera-gps-status {
  position: absolute;
  z-index: 24;
  top: 10px;
  right: 10px;
  max-width: min(78%, 290px);
  padding: 5px 9px;
  border: 1px solid rgba(251,191,36,.38);
  border-radius: 9px;
  background: rgba(15,23,42,.72);
  color: #fbbf24;
  font: 500 11px/1.3 Arial, sans-serif;
  text-align: right;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
#camera-gps-status[hidden]{display:none!important;}
#camera-gps-status[data-state="active"] { color:#a7f3d0; border-color:rgba(52,211,153,.35); }
#camera-gps-status[data-state="error"] { color:#fecaca; border-color:rgba(248,113,113,.45); }


/* Retentativa explícita de GPS: nunca é desenhada sobre a evidência exportada. */
#camera-gps-action {
  position:absolute;top:46px;right:10px;z-index:40;
  max-width:min(65vw,180px);min-height:32px;padding:6px 11px;
  border:1px solid rgba(251,191,36,.65);border-radius:10px;
  background:rgba(15,23,42,.92);color:#fbbf24;
  font:600 11px/1.25 Arial,sans-serif;
  box-shadow:0 2px 9px rgba(0,0,0,.28);
  cursor:pointer;touch-action:manipulation;
}
#camera-gps-action[hidden]{display:none!important;}
#camera-gps-action:focus-visible{outline:2px solid #fbbf24;outline-offset:3px;}
@media(max-width:360px){#camera-gps-status{font-size:10px;}#camera-gps-action{top:43px;}}


.header-brand-copy { min-width: 0; }
.header-brand-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
.header-brand-title-row h1 { min-width:0; margin:0; }
.header-settings-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.28);
  background: rgba(15,23,42,.7);
  color: #cbd5e1;
}
.header-settings-btn:hover { color:#fff; background:rgba(30,41,59,.92); }

.nav-gallery-btn { gap:2px; }
.nav-gallery-thumb {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(148,163,184,.35);
  background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.nav-gallery-thumb::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(203,213,225,.45);
}
.nav-gallery-thumb.has-image::before { display:none; }
.nav-gallery-thumb.has-image { border-color: rgba(245,158,11,.55); }

/* Seleção de orientação independente da rotação da interface. */
.capture-tools { flex:none; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; width:100%; padding:4px 8px; background:#0b1020; }
.capture-orientation-label, #camera-originals { background:rgba(15,23,42,.88); border:1px solid #475569; border-radius:8px; color:#f8fafc; padding:6px 8px; font-size:12px; }
.capture-orientation-label select { background:#0f172a; color:#f8fafc; max-width:142px; border:0; min-height:30px; font:inherit; }
.capture-orientation-status { font-size:11px; color:#f8fafc; background:rgba(15,23,42,.8); border-radius:4px; padding:3px 5px; }
.capture-tools .capture-orientation-status { order:3; }
.report-orientation-tools { flex:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:4px 12px; }
#capture-archive { color:#e2e8f0; background:#0f172a; border:1px solid #475569; border-radius:12px; width:min(94vw,600px); max-height:85dvh; padding:16px; margin:auto; }
#capture-archive::backdrop { background:rgba(0,0,0,.7); }
#capture-archive header { display:flex; gap:12px; justify-content:space-between; align-items:center; }
#capture-archive p { margin:10px 0; font-size:13px; }
#capture-archive button { padding:8px 10px; background:#1e293b; border:1px solid #64748b; border-radius:6px; margin:3px; }
.capture-archive-row { border-top:1px solid #475569; padding:8px 0; }