/* ==========================================================================
   20_ip_inspecao.css
   Módulo Inspeção. Todo seletor parte de .ip-app: o Dash serve assets/ em
   qualquer rota, então quem isola é o root, não o nome do arquivo.
   ========================================================================== */

.ip-app {
  /* Paleta própria. O 00_base.css publica só --ink, --muted, --paper, --panel,
     --line, --green, --lime e --red; tudo além disso nasce aqui, mesmo quando
     o nome parece genérico. */
  --ip-c-superficie-2: #EDEDED;
  --ip-c-linha-forte: #BEBEBE;
  --ip-c-acento: #142E66;
  --ip-c-acento-escuro: #0E2149;
  --ip-c-acento-suave: rgba(20, 46, 102, .08);
  --ip-c-alerta: #E07A00;

  /* Espaçamento, múltiplos de 4 */
  --ip-sp-1: 4px;
  --ip-sp-2: 12px;
  --ip-sp-3: 16px;
  --ip-sp-4: 20px;
  --ip-sp-5: 24px;
  --ip-sp-6: 32px;
  --ip-sp-7: 52px;
  --ip-sp-8: 76px;

  /* Cantos e movimento */
  --ip-r-pilula: 50px;
  --ip-r-cartao: 12px;
  --ip-r-campo: 6px;
  --ip-t-rapido: .3s;
  --ip-t-lento: .4s;

  /* Dimensões e camadas */
  --ip-altura-controle: 41px;
  --ip-altura-util: clamp(520px, calc(100vh - 126px), 900px);
  --ip-z-carga: 9998;
  --ip-z-modal: 9999;

  /* Tokens de tema do próprio Dash. O nome é contrato dele e não pode ser
     prefixado; o isolamento vem de estarem declarados neste root. Verificado:
     o menu do dropdown renderiza dentro de #ip-app, então herda daqui. O
     padrão de fábrica traz um roxo (#7f4bc4) fora desta paleta. */
  --Dash-Fill-Interactive-Strong: var(--ip-c-acento);
  --Dash-Fill-Interactive-Weak: var(--ip-c-acento-suave);
  --Dash-Fill-Primary-Hover: var(--ip-c-acento-suave);
  --Dash-Fill-Primary-Active: var(--ip-c-acento-suave);
  --Dash-Fill-Inverse-Strong: var(--panel);
  --Dash-Stroke-Strong: var(--ip-c-linha-forte);
  --Dash-Stroke-Weak: var(--line);
  --Dash-Text-Primary: var(--ink);
  --Dash-Text-Strong: var(--ink);
  --Dash-Text-Weak: var(--muted);
  --Dash-Text-Disabled: var(--ip-c-linha-forte);

  display: block;
  min-height: 100vh;
  padding: var(--ip-sp-3) var(--ip-sp-4) var(--ip-sp-4);
  background: var(--paper);
}

/* Formato dos seletores do Dash dentro deste módulo. */
.ip-app .dash-dropdown,
.ip-app .dash-dropdown-content { border-radius: var(--ip-r-campo); }
.ip-app .dash-dropdown { transition: border-color var(--ip-t-rapido) ease; }
.ip-app .dash-dropdown-option { border-radius: var(--ip-r-campo); }

/* --------------------------------------------------------------- faixa topo */

.ip-app .ip-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ip-sp-2);
  margin-bottom: var(--ip-sp-2);
  padding: var(--ip-sp-1) var(--ip-sp-2);
  border: 1px solid var(--line);
  border-radius: var(--ip-r-cartao);
  background: var(--panel);
}

.ip-app .ip-marca { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ip-sp-2); }

/* Sobre fundo branco a logo azul-marinho se resolve sozinha: sem chip. */
.ip-app .ip-marca__logo { display: block; height: 34px; width: auto; }

.ip-app .ip-marca h1 {
  margin: 0;
  color: var(--ip-c-acento);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.ip-app .ip-seletor--projeto { flex: 0 1 200px; min-width: 150px; }
.ip-app .ip-seletor--estaca { flex: 0 1 210px; min-width: 150px; }

.ip-app .ip-topo .ip-metricas {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: var(--ip-sp-3);
}
.ip-app .ip-topo .ip-metrica span { font-size: 11px; }
.ip-app .ip-topo .ip-metrica strong { font-size: 14px; }

.ip-app .ip-status-pulo {
  flex: 0 1 auto;
  max-width: 190px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- botões */

.ip-app .ip-btn {
  cursor: pointer;
  border: 1px solid var(--ip-c-acento);
  border-radius: var(--ip-r-pilula);
  padding: 9px var(--ip-sp-5);
  background: var(--panel);
  color: var(--ip-c-acento);
  font-size: 14px;
  font-weight: 700;
  transition: background-color var(--ip-t-rapido) ease, color var(--ip-t-rapido) ease,
              border-color var(--ip-t-rapido) ease;
}

.ip-app .ip-btn:hover { background: var(--ip-c-acento-suave); }

.ip-app .ip-btn--primario {
  border-color: var(--ip-c-acento);
  background: var(--ip-c-acento);
  color: #FFFFFF;
}
.ip-app .ip-btn--primario:hover {
  border-color: var(--ip-c-acento-escuro);
  background: var(--ip-c-acento-escuro);
}

.ip-app .ip-btn--fantasma {
  border-color: var(--ip-c-linha-forte);
  background: transparent;
  color: var(--muted);
}
.ip-app .ip-btn--fantasma:hover {
  border-color: var(--ip-c-acento);
  background: var(--ip-c-acento-suave);
  color: var(--ip-c-acento);
}

.ip-app .ip-btn--icone { padding: 9px var(--ip-sp-3); font-size: 15px; line-height: 1; }

/* Na faixa do topo todos os controles compartilham a mesma altura; no modal
   os seletores seguem compactos, porque lá as linhas de cor são estreitas. */
.ip-app .ip-topo .dash-dropdown,
.ip-app .ip-topo .ip-btn { min-height: var(--ip-altura-controle); }

/* ------------------------------------------------------------- área útil */

.ip-app .ip-area {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--ip-sp-2);
}

.ip-app .ip-painel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ip-r-cartao);
  background: var(--panel);
}

/* O vídeo se apoia no cinza claro do sistema: dá moldura à imagem sem furar
   o tema claro nem competir com ela. */
.ip-app .ip-video {
  display: grid;
  height: var(--ip-altura-util);
  place-items: center;
  background: var(--ip-c-superficie-2);
}

.ip-app .ip-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ip-app .ip-mapa-perfil {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--ip-altura-util);
  background: var(--panel);
}

.ip-app .ip-mapa {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.ip-app .ip-mapa .leaflet-container {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* ---------------------------------------------------------------- perfil */

.ip-app .ip-perfil {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.ip-app .ip-perfil .js-plotly-plot,
.ip-app .ip-perfil .plot-container,
.ip-app .ip-perfil .svg-container {
  width: 100%;
  height: 100%;
}

/* Marcador da posição do vídeo. Como a janela do perfil mantém o ponto sempre
   centralizado, ele fica parado no centro da área de plotagem e só precisa ser
   reposicionado quando o gráfico muda de tamanho. */
.ip-app .ip-perfil__marcador {
  position: absolute;
  display: none;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  box-sizing: border-box;
  border: 3px solid var(--ip-c-acento);
  border-radius: 50%;
  background: #FFFFFF;
  z-index: 5;
}

/* ------------------------------------------------------------- leituras */

.ip-app .ip-metricas { display: flex; align-items: center; gap: var(--ip-sp-4); }

.ip-app .ip-metrica {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.ip-app .ip-metrica strong { color: var(--ip-c-acento); font-size: 16px; font-weight: 600; }

.ip-app .ip-metrica span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ------------------------------------------------------ tela de carga */

/* z-index abaixo do modal: se a carga falhar, o aviso aparece por cima. */
.ip-app .ip-carga {
  position: fixed;
  z-index: var(--ip-z-carga);
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(3px);
}

.ip-app .ip-carga__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ip-sp-3);
}

.ip-app .ip-carga__anel {
  width: 56px;
  height: 56px;
  border: 5px solid var(--line);
  border-top-color: var(--ip-c-acento);
  border-radius: 50%;
  animation: ip-girar .9s linear infinite;
}

.ip-app .ip-carga__texto {
  color: var(--ip-c-acento);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* O bloco é global no documento e não aceita seletor no corpo: o isolamento
   vem do nome prefixado. */
@keyframes ip-girar {
  to { transform: rotate(360deg); }
}

/* Quem pede menos movimento continua vendo que algo acontece, mais devagar. */
@media (prefers-reduced-motion: reduce) {
  .ip-app .ip-carga__anel { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------- modal */

.ip-app .ip-modal {
  position: fixed;
  z-index: var(--ip-z-modal);
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--ip-sp-5);
  background: rgba(51, 51, 51, .38);
  backdrop-filter: blur(6px);
}

.ip-app .ip-modal__cartao {
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--ip-c-linha-forte);
  border-radius: var(--ip-r-cartao);
  background: var(--panel);
}

.ip-app .ip-modal__cabecalho,
.ip-app .ip-modal__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-sp-2);
  padding: var(--ip-sp-4);
}

.ip-app .ip-modal__cabecalho { border-bottom: 1px solid var(--line); }

.ip-app .ip-modal__cabecalho h2 {
  margin: 0;
  color: var(--ip-c-acento);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ip-app .ip-modal__cabecalho p {
  margin: var(--ip-sp-1) 0 0;
  color: var(--muted);
  font-size: 13px;
}

.ip-app .ip-modal__corpo { display: grid; gap: var(--ip-sp-2); padding: var(--ip-sp-4); }
.ip-app .ip-modal__rodape { border-top: 1px solid var(--line); }

.ip-app .ip-modal__status { min-height: 16px; color: var(--muted); font-size: 13px; }

/* Falha de carga precisa se distinguir da mensagem de status normal. */
.ip-app .ip-modal__erro {
  padding: var(--ip-sp-2) var(--ip-sp-3);
  border-left: 3px solid var(--red);
  border-radius: var(--ip-r-campo);
  background: rgba(204, 51, 102, .08);
  color: #8A1F45;
  font-size: 13px;
  line-height: 1.5;
}

.ip-app .ip-ajuda { margin: -2px 2px 2px; color: var(--muted); font-size: 13px; }

.ip-app .ip-aviso {
  margin: -2px 2px var(--ip-sp-1);
  padding: var(--ip-sp-2) var(--ip-sp-3);
  border-left: 3px solid var(--ip-c-alerta);
  border-radius: var(--ip-r-campo);
  background: rgba(224, 122, 0, .08);
  color: #8A4B00;
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------- editor de cores */

.ip-app .ip-editor-cores:empty { display: none; }

.ip-app .ip-editor-cores {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ip-r-cartao);
  background: var(--panel);
}

.ip-app .ip-editor-cores__titulo {
  padding: var(--ip-sp-2) var(--ip-sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--ip-c-superficie-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ip-app .ip-editor-cores__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-sp-3);
  min-height: 44px;
  padding: 6px var(--ip-sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.ip-app .ip-editor-cores__linha:last-child { border-bottom: 0; }

.ip-app .ip-editor-cores__erro {
  padding: var(--ip-sp-2) var(--ip-sp-3);
  color: var(--red);
  font-size: 13px;
}

.ip-app .ip-seletor--cor { width: 155px; flex: 0 0 155px; }
.ip-app .ip-seletor--escala { width: 180px; flex: 0 0 180px; }

/* ------------------------------------------------------------- campos */

.ip-app .ip-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-sp-4);
  padding: var(--ip-sp-1) 2px;
}

.ip-app .ip-campo label { font-size: 14px; font-weight: 600; }

.ip-app .ip-campo small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.ip-app .ip-campo-numero {
  width: 110px;
  padding: var(--ip-sp-1) var(--ip-sp-2);
  border: 1px solid var(--ip-c-linha-forte);
  border-radius: var(--ip-r-campo);
  outline: 0;
  background: var(--panel);
  color: var(--ink);
  transition: border-color var(--ip-t-rapido) ease;
}

.ip-app .ip-campo-numero:focus { border-color: var(--ip-c-acento); }

/* -------------------------------------------------------------- legenda */

.ip-app .ip-legenda {
  position: absolute;
  z-index: 1000;
  bottom: var(--ip-sp-5);
  left: var(--ip-sp-2);
  min-width: 170px;
  max-width: 260px;
  padding: var(--ip-sp-2) var(--ip-sp-3);
  border: 1px solid var(--ip-c-linha-forte);
  border-radius: var(--ip-r-cartao);
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: 13px;
  pointer-events: none;
}

.ip-app .ip-legenda__titulo {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ip-app .ip-legenda__item {
  display: flex;
  align-items: center;
  gap: var(--ip-sp-1);
  margin-top: 5px;
  line-height: 1.25;
}

.ip-app .ip-legenda__amostra {
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 4px;
  border-radius: var(--ip-r-pilula);
}

/* Controle de camadas do Leaflet, escopado pelo root do módulo. */
.ip-app .leaflet-control-layers {
  border: 1px solid var(--ip-c-linha-forte);
  border-radius: var(--ip-r-cartao);
  background: var(--panel);
  box-shadow: none;
  color: var(--ink);
  font-size: 13px;
}

.ip-app .leaflet-bar a { border-radius: var(--ip-r-campo); color: var(--ip-c-acento); }

/* ---------------------------------------------------------- responsivo */

@media (max-width: 1400px) {
  /* A logo já identifica a marca; o título pode sair para a faixa caber
     em uma linha só. */
  .ip-app .ip-marca h1 { display: none; }
}

@media (max-width: 1050px) {
  .ip-app .ip-area { grid-template-columns: 1fr; }
  .ip-app .ip-video,
  .ip-app .ip-mapa-perfil { height: min(66vh, 620px); }
}

@media (max-width: 680px) {
  .ip-app { padding: var(--ip-sp-2); }
  .ip-app .ip-topo .ip-metricas { justify-content: flex-start; }
  .ip-app .ip-metricas { gap: var(--ip-sp-2); flex-wrap: wrap; }
  .ip-app .ip-modal__rodape { align-items: stretch; flex-direction: column-reverse; }
  .ip-app .ip-modal__rodape .ip-btn { width: 100%; }
}