/**
 * INCUBALOG — Componentes de UI da PWA de campo. Depende de tokens.css.
 *
 * Linguagem visual própria: "painel de instrumentos".
 * O operador lê displays de incubadora o dia todo — a UI fala a mesma língua:
 * módulos flush em um painel único (não cards flutuantes), régua de desvio
 * analógica por variável e chanfro diagonal como assinatura geométrica Vibra.
 */

/* ══ ASSINATURA: título de seção com traço diagonal ══ */
.secao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.secao::before {
  content: "";
  width: 18px;
  height: 10px;
  background: var(--verde-vibra);
  transform: skewX(-24deg);
}

/* ══ PAINEL DE LEITURA ═══════════════════════════════════
   Bloco único com chanfro no canto superior direito.
   Módulos empilhados, separados por hairline — leitura vertical
   contínua, como um rack de instrumentos. */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-4) var(--esp-4) calc(var(--esp-4) + 12px);
  border-bottom: 1px solid var(--borda);
  min-height: var(--toque);
}
.painel .mod:last-child { border-bottom: 0; }

/* Banda de estado na borda esquerda — espessura cresce com a gravidade */
.mod::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.mod__cab {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.mod__cab svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.mod__nome {
  font-size: var(--fs-rotulo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  flex: 1;
}
.mod__tag {
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mod__leitura {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
}
.mod__valor {
  font-size: var(--fs-valor);
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.mod__valor small {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--texto-fraco);
  margin-left: 2px;
}
.mod__delta {
  font-size: var(--fs-corpo);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
}

/* ── Régua de desvio ─────────────────────────────────────
   Setpoint no centro, faixa tolerada em verde translúcido,
   marcador na posição do valor lido (--pos em %).
   Leitura pré-atencional: a posição diz tudo antes do número. */
.mod__regua {
  position: relative;
  height: 20px;
  margin-top: var(--esp-1);
}
.mod__regua::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 6px;
  background: rgba(239, 240, 230, 0.10);
}
.mod__faixa {
  position: absolute;
  left: 32%;
  right: 32%;
  top: 7px;
  height: 6px;
  background: rgba(45, 209, 169, 0.30);
}
.mod__sp {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.6);
}
.mod__marcador {
  position: absolute;
  left: clamp(2%, var(--pos, 50%), 98%);
  top: 10px;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 30, 33, 0.7);
}

.mod__meta {
  font-size: var(--fs-rotulo);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.mod__meta b { color: var(--texto-suave); font-weight: 600; }

/* ══ ESTADOS ═══════════════════════════════════════════════
   Diferenciação quádrupla (daltonismo): cor + ícone próprio +
   espessura da banda + FORMA do marcador na régua. */

/* NORMAL — banda fina, marcador circular */
.mod[data-estado="normal"]::before { width: 4px; background: var(--normal); }
.mod[data-estado="normal"] .mod__cab svg,
.mod[data-estado="normal"] .mod__tag { color: var(--normal); }
.mod[data-estado="normal"] .mod__marcador { background: var(--normal); }

/* ATENÇÃO — banda média, valor colorido, marcador circular */
.mod[data-estado="atencao"]::before { width: 6px; background: var(--atencao); }
.mod[data-estado="atencao"] .mod__cab svg,
.mod[data-estado="atencao"] .mod__tag,
.mod[data-estado="atencao"] .mod__valor,
.mod[data-estado="atencao"] .mod__delta { color: var(--atencao); }
.mod[data-estado="atencao"] .mod__marcador { background: var(--atencao); }

/* TENDÊNCIA — banda média + fundo tonal, marcador em seta */
.mod[data-estado="tendencia"]::before { width: 6px; background: var(--tendencia); }
.mod[data-estado="tendencia"] {
  background: linear-gradient(90deg, var(--tendencia-tonal), transparent 70%);
}
.mod[data-estado="tendencia"] .mod__cab svg,
.mod[data-estado="tendencia"] .mod__tag,
.mod[data-estado="tendencia"] .mod__valor,
.mod[data-estado="tendencia"] .mod__delta { color: var(--tendencia); }
.mod[data-estado="tendencia"] .mod__marcador {
  background: var(--tendencia);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* seta: aponta a direção do desvio */
}

/* MUDANÇA DE PASSE — mesma família visual da tendência (não é crítico) */
.mod[data-estado="mudanca-passe"]::before { width: 6px; background: var(--tendencia); }
.mod[data-estado="mudanca-passe"] {
  background: linear-gradient(90deg, var(--tendencia-tonal), transparent 70%);
}
.mod[data-estado="mudanca-passe"] .mod__cab svg,
.mod[data-estado="mudanca-passe"] .mod__tag,
.mod[data-estado="mudanca-passe"] .mod__valor,
.mod[data-estado="mudanca-passe"] .mod__delta { color: var(--tendencia); }
.mod[data-estado="mudanca-passe"] .mod__marcador {
  background: var(--tendencia);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* CRÍTICO — banda listrada tipo fita de perigo industrial,
   fundo tonal, valor maior e mais pesado, marcador losango */
.mod[data-estado="critico"]::before {
  width: 12px;
  background: repeating-linear-gradient(
    -45deg,
    var(--critico) 0 7px,
    #5c1f1a 7px 14px
  );
}
.mod[data-estado="critico"] {
  background: linear-gradient(90deg, var(--critico-tonal), transparent 75%);
}
.mod[data-estado="critico"] .mod__cab svg { color: var(--critico); }
.mod[data-estado="critico"] .mod__nome { color: var(--texto); }
.mod[data-estado="critico"] .mod__tag {
  color: #001416;
  background: var(--critico);
  padding: 3px 10px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.mod[data-estado="critico"] .mod__valor {
  color: var(--critico);
  font-size: var(--fs-valor-critico);
  font-weight: 800;
}
.mod[data-estado="critico"] .mod__delta { color: var(--critico); }
.mod[data-estado="critico"] .mod__marcador {
  background: var(--critico);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* VAZIO — não capturado: banda tracejada, régua sem marcador */
.mod[data-estado="vazio"]::before {
  width: 4px;
  background: repeating-linear-gradient(
    var(--cinza-30) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.5;
}
.mod[data-estado="vazio"] .mod__cab svg,
.mod[data-estado="vazio"] .mod__tag { color: var(--cinza-30); }
.mod[data-estado="vazio"] .mod__valor {
  color: var(--texto-fraco);
  font-size: var(--fs-destaque);
  font-weight: 500;
}
.mod[data-estado="vazio"] .mod__regua::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(239, 240, 230, 0.10) 0 8px,
    transparent 8px 16px
  );
}
.mod[data-estado="vazio"] .mod__faixa,
.mod[data-estado="vazio"] .mod__sp,
.mod[data-estado="vazio"] .mod__marcador { display: none; }

/* ══ CONTEXTO (onde estou) — barra de localização ══ */
.contexto {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  overflow: hidden;
}
.contexto__maquina {
  background: var(--verde-vibra);
  color: #00343a;
  font-weight: 800;
  font-size: var(--fs-destaque);
  display: flex;
  align-items: center;
  padding: var(--esp-3) var(--esp-4);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.contexto__info {
  padding: var(--esp-2) var(--esp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.contexto__local {
  font-size: var(--fs-corpo);
  font-weight: 600;
  color: var(--texto);
}
.contexto__hora {
  font-size: var(--fs-rotulo);
  color: var(--texto-fraco);
}