/**
 * INCUBALOG — PWA de campo. Camada de layout e componentes gerais.
 * Ordem de carga: tokens.css → ui.css (painel de leitura) → app.css.
 * Alvo: Galaxy A55 (412px), luvas, baixa luz — toque mínimo 56px.
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Sem isto, o display:flex dos componentes vence o [hidden] do browser. */
[hidden] { display: none !important; }

html { height: 100%; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  line-height: 1.45;
  min-height: 100%;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--esp-3) + var(--safe-topo)) var(--esp-4) calc(var(--esp-8) + var(--safe-base));
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* ══ CABEÇALHO ══════════════════════════════════════════ */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--borda);
}
.topo__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
  color: var(--texto);
  min-height: 44px;
}
.topo__logo {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  border-radius: 10px;
}
.topo__nome {
  display: block;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: var(--fs-corpo);
}
.topo__sub {
  display: block;
  font-size: var(--fs-rotulo);
  color: var(--texto-fraco);
}
.topo__sair {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: var(--fs-rotulo);
  font-weight: 600;
  padding: var(--esp-3);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.topo__sair:active { color: var(--verde-vibra); }

.topo__user {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 55%;
}
.topo__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--verde-vibra);
  flex-shrink: 0;
}
.topo__avatar--iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-alta);
  color: var(--verde-vibra);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.topo__nome-user {
  font-size: var(--fs-rotulo);
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}
.topo__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.topo__sessao {
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.topo__user .topo__sair { padding-left: var(--esp-2); }

/* Navegação de fluxo — voltar sem precisar sair do app */
.nav-fluxo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: calc(-1 * var(--esp-2)) 0 var(--esp-1);
}
.nav-fluxo__voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-1);
  color: var(--verde-vibra);
  font-size: var(--fs-corpo);
  font-weight: 700;
  text-decoration: none;
}
.nav-fluxo__voltar svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav-fluxo__voltar:active { filter: brightness(1.2); }
.nav-fluxo__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  color: var(--texto-suave);
  font-size: var(--fs-rotulo);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--borda);
}
.nav-fluxo__link:active {
  border-color: var(--verde-vibra);
  color: var(--verde-vibra);
}

/* Visor de leitura do QR da máquina */
.scan-visor {
  position: relative;
  overflow: hidden;
  background: #00191c;
  border: 1px solid var(--borda);
  min-height: 280px;
  aspect-ratio: 3 / 4;
  max-height: 58vh;
}
.scan-visor video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-visor__mira {
  pointer-events: none;
  position: absolute;
  inset: 18%;
  border: 2px solid var(--verde-vibra);
  box-shadow: 0 0 0 9999px rgba(0, 20, 22, 0.45);
}
.scan-visor__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  background: rgba(0, 30, 33, 0.82);
  color: var(--texto);
  font-size: var(--fs-rotulo);
  font-weight: 600;
  text-align: center;
}
.scan-visor--login {
  aspect-ratio: 4 / 3;
  max-height: 42vh;
  min-height: 200px;
}
.scan-painel {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

/* ══ TEXTOS ═════════════════════════════════════════════ */
.titulo { font-size: var(--fs-destaque); font-weight: 700; }
.apoio { font-size: var(--fs-corpo); color: var(--texto-suave); }
.nota-fraca { font-size: var(--fs-rotulo); color: var(--texto-fraco); }

/* ══ MENSAGENS DO SISTEMA ═══════════════════════════════ */
.avisos { list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); }
.avisos li {
  padding: var(--esp-3) var(--esp-4);
  background: var(--normal-tonal);
  border-left: 4px solid var(--normal);
  color: var(--texto);
  font-weight: 500;
}
.avisos li.error {
  background: var(--critico-tonal);
  border-left-color: var(--critico);
}

/* Erro de formulário: claro e não punitivo */
.faixa-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--critico-tonal);
  border-left: 4px solid var(--critico);
  font-weight: 500;
}
.faixa-erro svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--critico); }

.chip-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: var(--normal-tonal);
  color: var(--normal);
  font-weight: 600;
  font-size: var(--fs-rotulo);
}
.chip-ok svg { width: 16px; height: 16px; }

/* ══ FORMULÁRIOS ════════════════════════════════════════
   Controles altos (60px) para uso com luvas; foco bem visível. */
.formulario { display: flex; flex-direction: column; gap: var(--esp-4); }

.campo { display: flex; flex-direction: column; gap: var(--esp-2); }
.campo > label {
  font-size: var(--fs-rotulo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1.125rem; /* 18px */
  transition: border-color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 3px solid var(--verde-vibra);
  outline-offset: -1px;
  border-color: var(--verde-vibra);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-fraco); }

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD1A9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-4) center;
  background-size: 20px;
  padding-right: calc(var(--esp-4) * 2 + 20px);
}

/* Desabilitado óbvio: tracejado + cadeado textual no rótulo, não só opacidade */
.campo select:disabled,
.campo input:disabled {
  border-style: dashed;
  border-color: var(--borda);
  background-color: transparent;
  background-image: none;
  color: var(--texto-fraco);
  opacity: 1;
}
.campo__aguarda {
  font-size: var(--fs-rotulo);
  color: var(--texto-fraco);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.campo__obrigatorio {
  color: var(--critico, #c62828);
  font-weight: 700;
}

/* ══ BOTÕES ═════════════════════════════════════════════ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: var(--toque-primario);
  padding: var(--esp-3) var(--esp-5);
  border: none;
  font-family: var(--fonte);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform var(--t-rapido) var(--ease), filter var(--t-rapido) var(--ease);
}
.btn:active { transform: scale(0.98); filter: brightness(1.15); }

.btn--primario {
  background: var(--verde-vibra);
  color: #00343a;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.btn--primario:disabled {
  background: var(--superficie-alta);
  color: var(--texto-fraco);
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.btn--secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  min-height: var(--toque);
}
.btn--secundario:active { border-color: var(--verde-vibra); color: var(--verde-vibra); }

.formulario--encerrar { margin-top: var(--esp-3); }

.fallback-gate {
  margin-top: var(--esp-5);
  padding: var(--esp-3);
  border: 1px dashed var(--borda, rgba(255,255,255,.2));
  border-radius: var(--raio, 12px);
}
.fallback-gate > summary {
  cursor: pointer;
  font-size: var(--fs-rotulo);
  color: var(--texto-fraco);
  list-style: none;
}
.fallback-gate > summary::-webkit-details-marker { display: none; }
.fallback-gate[open] > summary {
  margin-bottom: var(--esp-3);
  color: var(--texto);
}
.fallback-gate .formulario { margin-top: var(--esp-2); }


.campo-check {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  font-weight: 600;
  cursor: pointer;
}
.campo-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Escolhas de ciclo (início normal/continuação, encerramento normal/transferência) */
.opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-4) var(--esp-3);
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.opcoes > legend {
  padding: 0 var(--esp-2);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.opcoes .campo-check { padding: var(--esp-2) 0; font-weight: 500; }

.btn--critico {
  background: var(--critico);
  color: #001416;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

/* Barra fixa: ação principal sempre ao alcance do polegar */
.barra-fixa {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--esp-4));
  padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + var(--safe-base));
  background: linear-gradient(transparent, var(--fundo) 30%);
}

/* ══ PASSOS (login e seleção) ═══════════════════════════ */
.passo { display: flex; flex-direction: column; gap: var(--esp-3); }
.passo__cab {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-weight: 700;
  font-size: var(--fs-corpo);
}
.passo__num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  font-weight: 800;
  transform: skewX(-12deg);
  flex-shrink: 0;
}
.passo__num span { transform: skewX(12deg); }
.passo[data-ok="1"] .passo__num {
  background: var(--verde-vibra);
  border-color: var(--verde-vibra);
  color: #00343a;
}
.passo[data-bloqueado="1"] { opacity: 0.55; }
.passo[data-bloqueado="1"] .passo__num { border-style: dashed; }

/* ══ ÁREA DE FOTO (mira de câmera) ══════════════════════ */
.foto-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  overflow: hidden;
  cursor: pointer;
  /* Cantoneiras de enquadramento — linguagem de visor de câmera */
  background-image:
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra)),
    linear-gradient(var(--verde-vibra), var(--verde-vibra));
  background-repeat: no-repeat;
  background-size: 28px 3px, 3px 28px, 28px 3px, 3px 28px, 28px 3px, 3px 28px, 28px 3px, 3px 28px;
  background-position:
    12px 12px, 12px 12px,
    calc(100% - 12px) 12px, calc(100% - 12px) 12px,
    12px calc(100% - 12px), 12px calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px);
}
.foto-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.foto-area__vazia {
  text-align: center;
  pointer-events: none;
  padding: var(--esp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
}
.foto-area__vazia svg { width: 48px; height: 48px; color: var(--verde-vibra); }
.foto-area__chamada { font-size: var(--fs-titulo); font-weight: 700; }
.foto-area__dica { font-size: var(--fs-rotulo); color: var(--texto-fraco); }
.foto-area img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.foto-area__trocar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--esp-2);
  text-align: center;
  font-size: var(--fs-rotulo);
  font-weight: 600;
  color: var(--texto);
  background: rgba(0, 30, 33, 0.75);
  pointer-events: none;
}

/* Instruções de enquadramento */
.instrucoes { display: flex; flex-direction: column; gap: var(--esp-2); }
.instrucoes li {
  list-style: none;
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  color: var(--texto-suave);
  font-size: var(--fs-corpo);
}
.instrucoes li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  background: var(--verde-vibra);
  transform: skewX(-12deg);
  flex-shrink: 0;
}

/* ══ SITUAÇÃO DA MÁQUINA E DO CICLO ═════════════════════
   Antes de fotografar o operador precisa saber o estado declarado e se abre ciclo. */
.faixa-status {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie);
  border-left: 4px solid var(--cinza-30);
}
.faixa-status svg { width: 26px; height: 26px; flex-shrink: 0; }
.faixa-status__titulo { font-size: var(--fs-corpo); font-weight: 800; }
.faixa-status__apoio {
  font-size: var(--fs-rotulo);
  font-weight: 500;
  color: var(--texto-suave);
  margin-top: 2px;
}
.faixa-status[data-ciclo="inicio"] {
  background: var(--normal-tonal);
  border-left-color: var(--normal);
  color: var(--normal);
}
.faixa-status[data-ciclo="andamento"],
.faixa-status[data-ciclo="sem-ciclo"] { color: var(--texto); }

.faixa-status[data-estado="em_ciclo"] {
  background: var(--normal-tonal);
  border-left-color: var(--normal);
  color: var(--normal);
}
.faixa-status[data-estado="pre_incubacao"] {
  background: var(--atencao-tonal);
  border-left-color: var(--atencao);
  color: var(--atencao);
}
.faixa-status[data-estado="transferencia_vacina"],
.faixa-status[data-estado="transferencia_entre_maquinas"],
.faixa-status[data-estado="em_transferencia"] {
  background: var(--tendencia-tonal);
  border-left-color: var(--tendencia);
  color: var(--tendencia);
}
.faixa-status[data-estado="limpeza"] { color: var(--texto); }
.faixa-status[data-estado="fora_de_ciclo"] { color: var(--texto-suave); }
/* Estado ainda não declarado: vazio, não é erro. */
.faixa-status[data-estado=""] {
  border-left-style: dashed;
  color: var(--texto-suave);
}

/* Estado vem antes da foto: o operador declara olhando a máquina. */
.passo-estado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.opcao-estado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  cursor: pointer;
}
.opcao-estado input {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  flex-shrink: 0;
}
.opcao-estado span { display: flex; flex-direction: column; gap: 2px; }
.opcao-estado__rotulo { font-weight: 700; }
.opcao-estado__significado { font-size: var(--fs-rotulo); color: var(--texto-suave); }
.opcao-estado__efeito { font-size: var(--fs-rotulo); font-weight: 600; color: var(--texto); }

/* ══ BANNER DE NÍVEL (resultado) ════════════════════════ */
.banner {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.banner svg { width: 36px; height: 36px; flex-shrink: 0; }
.banner__nivel { font-size: var(--fs-destaque); font-weight: 800; line-height: 1.1; }
.banner__apoio { font-size: var(--fs-rotulo); margin-top: 2px; }

.banner[data-estado="normal"] {
  background: var(--normal-tonal);
  border-left: 4px solid var(--normal);
  color: var(--normal);
}
.banner[data-estado="atencao"] {
  background: var(--atencao-tonal);
  border-left: 6px solid var(--atencao);
  color: var(--atencao);
}
.banner[data-estado="tendencia"] {
  background: var(--tendencia-tonal);
  border-left: 6px solid var(--tendencia);
  color: var(--tendencia);
}
.banner[data-estado="mudanca-passe"] {
  background: var(--tendencia-tonal);
  border-left: 6px solid var(--tendencia);
  color: var(--tendencia);
}
/* Crítico: sólido, texto escuro, fita de perigo — impossível de ignorar */
.banner[data-estado="critico"] {
  background: var(--critico);
  color: #001416;
  border-left: 12px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #001416 0 7px, var(--critico) 7px 14px) 12;
}
.banner[data-estado="critico"] .banner__apoio { font-weight: 600; }

/* ══ AÇÕES ORIENTATIVAS ═════════════════════════════════ */
.acoes { list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); }
.acoes li {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--atencao);
  font-weight: 500;
}
.acoes li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--atencao); margin-top: 2px; }

/* ══ PROCESSANDO (análise por IA, até 15 s) ═════════════ */
.processando {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-5);
  padding: var(--esp-6);
  background: rgba(0, 32, 36, 0.96);
  text-align: center;
}
.processando__icone {
  width: 64px;
  height: 64px;
  color: var(--verde-vibra);
  animation: pulso 1.6s var(--ease) infinite;
}
.processando__etapa { font-size: var(--fs-titulo); font-weight: 700; min-height: 1.4em; }
.processando__barra {
  width: min(280px, 70vw);
  height: 8px;
  background: var(--superficie-alta);
  overflow: hidden;
}
.processando__barra i {
  display: block;
  height: 100%;
  width: 4%;
  background: var(--verde-vibra);
  transition: width 14s cubic-bezier(0.1, 0.6, 0.4, 1);
}
.processando__nota { font-size: var(--fs-rotulo); color: var(--texto-suave); max-width: 280px; }

@keyframes pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .processando__icone { animation: none; }
  .processando__barra i { transition: none; }
}

/* Falha de rede com nova tentativa */
.falha-rede {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background: var(--critico-tonal);
  border-left: 4px solid var(--critico);
}
.falha-rede p { font-weight: 500; }

/* ══ HISTÓRICO ══════════════════════════════════════════ */
.hist { list-style: none; display: flex; flex-direction: column; }
.hist li { border-bottom: 1px solid var(--borda); }
.hist li:first-child { border-top: 1px solid var(--borda); }
.hist a {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--toque);
  padding: var(--esp-3) var(--esp-2) var(--esp-3) var(--esp-3);
  text-decoration: none;
  color: var(--texto);
  border-left: 4px solid transparent;
  transition: background var(--t-rapido) var(--ease);
}
.hist a:active { background: var(--superficie); }
.hist [data-estado="normal"] a { border-left-color: var(--normal); }
.hist [data-estado="atencao"] a { border-left-color: var(--atencao); }
.hist [data-estado="tendencia"] a { border-left-color: var(--tendencia); background: linear-gradient(90deg, var(--tendencia-tonal), transparent 60%); }
.hist [data-estado="mudanca-passe"] a { border-left-color: var(--tendencia); background: linear-gradient(90deg, var(--tendencia-tonal), transparent 60%); }
.hist [data-estado="critico"] a { border-left: 10px solid; border-image: repeating-linear-gradient(-45deg, var(--critico) 0 6px, #5c1f1a 6px 12px) 10; background: linear-gradient(90deg, var(--critico-tonal), transparent 60%); }

.hist__data { font-weight: 700; font-size: var(--fs-corpo); font-variant-numeric: tabular-nums; }
.hist__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hist__meta { font-size: var(--fs-rotulo); color: var(--texto-fraco); }
.hist__nivel { font-size: var(--fs-rotulo); font-weight: 700; }
.hist [data-estado="normal"] .hist__nivel { color: var(--normal); }
.hist [data-estado="atencao"] .hist__nivel { color: var(--atencao); }
.hist [data-estado="tendencia"] .hist__nivel { color: var(--tendencia); }
.hist [data-estado="mudanca-passe"] .hist__nivel { color: var(--tendencia); }
.hist [data-estado="critico"] .hist__nivel { color: var(--critico); }
.hist__seta { color: var(--texto-fraco); flex-shrink: 0; width: 20px; height: 20px; }

/* Grade 2 colunas (confirmação manual) */
.grade-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3) var(--esp-3);
}
.grade-2 .campo--cheio { grid-column: 1 / -1; }
@media (max-width: 359px) {
  .grade-2 { grid-template-columns: 1fr; }
}

/* Telas maiores: conteúdo centralizado, nada estica além de 480px */
@media (min-width: 720px) {
  .app { padding-top: var(--esp-6); }
}

/* ══ LOGIN MICROSOFT (gestão) ═══════════════════════════ */
.login-sep {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-6) 0 var(--esp-4);
  color: var(--texto-fraco);
  font-size: var(--fs-rotulo);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-sep::before,
.login-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda-forte);
}

.btn-ms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: var(--toque-primario);
  padding: var(--esp-3) var(--esp-5);
  text-decoration: none;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  font-weight: 700;
  transition: transform var(--t-rapido) var(--ease), filter var(--t-rapido) var(--ease);
}
.btn-ms:active { transform: scale(0.98); }
.btn-ms__logo { width: 21px; height: 21px; flex-shrink: 0; }

/* Campo: secundário — não compete com o fluxo do operador (QR+PIN) */
.btn-ms--campo {
  background: #ffffff;
  color: #1b1b1b;
  border: 1px solid var(--borda-forte);
}
.btn-ms--campo:active { border-color: var(--verde-vibra); }

/* Loading curto no login — feedback imediato ao tocar Entrar */
.processando--rapido .processando__barra { display: none; }
.entrando-anel {
  width: 48px;
  height: 48px;
  border: 3px solid var(--superficie-alta);
  border-top-color: var(--verde-vibra);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .entrando-anel {
    animation: none;
    border-color: var(--verde-vibra);
  }
}