/* Aviso de conexão / fila de envio (operação offline).
   Fica preso na tela de propósito: o pior resultado possível é o operador achar
   que registrou e o registro ainda estar parado no computador dele. */
#net-status {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font: 600 0.82rem/1.2 Poppins, system-ui, sans-serif;
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* Sem conexão: âmbar. Não é vermelho porque nada foi perdido — o registro está
   salvo e vai subir. Vermelho treinaria a equipe a ignorar erro de verdade. */
#net-status.net-off  { background: #b45309; }

/* Enviando: a fila está andando. */
#net-status.net-pend { background: #1f6f4a; }

#net-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
  flex: 0 0 auto;
}
#net-status.net-pend::before { animation: net-pulsa 1.1s ease-in-out infinite; }

@keyframes net-pulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* A barra inferior do mobile ocupa a base da tela; sem isto o aviso cai em cima dela. */
@media (max-width: 820px) {
  #net-status { bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  #net-status.net-pend::before { animation: none; }
}

/* ── Quarentena: o único estado que NÃO se resolve sozinho ─────────────────
   Âmbar (net-off) e verde (net-pend) dizem "aguarde". Este diz "alguém precisa
   olhar" — por isso é o único roxo/escuro, o único clicável e o único que
   convida ao clique. Se todos os estados fossem iguais, a equipe aprenderia a
   ignorar o aviso e ele deixaria de servir para o dia em que importa. */
#net-status.net-quar {
  background: #6f1d7a;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#net-status.net-quar:hover,
#net-status.net-quar:focus-visible { background: #5a1763; }

/* ── Tela "Fila de sincronização" ─────────────────────────────────────────── */
#netui-fundo {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#netui-caixa {
  background: #fff;
  color: #1f2937;
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  font: 400 0.92rem/1.45 Poppins, system-ui, sans-serif;
  outline: none;
}

.netui-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 14px 14px 0 0;
}
.netui-topo h2 { margin: 0; font-size: 1.08rem; font-weight: 700; }

/* A primeira coisa que a pessoa lê tem que ser "não perdi nada". O resto da tela
   é sobre o que fazer, não sobre o susto. */
.netui-calma { margin: 4px 0 0; font-size: .82rem; color: #15803d; font-weight: 600; }

.netui-x {
  border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: #6b7280; padding: 0 4px;
}

.netui-sec { padding: 16px 20px 4px; }
.netui-sec h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.netui-sec-quar h3 { color: #6f1d7a; }
.netui-sub { margin: 2px 0 12px; font-size: .8rem; color: #6b7280; }

.netui-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.netui-sec-quar .netui-item { border-left: 4px solid #6f1d7a; }
.netui-item-tit { font-weight: 600; margin-bottom: 6px; }

.netui-item-simples {
  display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; padding: 9px 12px; margin-bottom: 6px;
}

.netui-motivo {
  background: #faf5fb; border-radius: 8px; padding: 9px 11px;
  font-size: .85rem; margin-bottom: 8px;
}
.netui-meta { font-size: .76rem; color: #6b7280; }
.netui-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.netui-detalhe {
  margin: 10px 0 0; padding: 10px; background: #0f172a; color: #e2e8f0;
  border-radius: 8px; font-size: .74rem; white-space: pre-wrap;
  word-break: break-word; max-height: 240px; overflow: auto;
}

.netui-vazio { padding: 28px 20px; text-align: center; color: #6b7280; }
.netui-vazio strong { display: block; color: #15803d; font-size: 1rem; margin-bottom: 4px; }

.netui-rodape {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  padding: 14px 20px 18px; border-top: 1px solid #e5e7eb;
  position: sticky; bottom: 0; background: #fff;
}

/* Balcão e tablet: em tela pequena o modal ocupa tudo e os botões viram bloco,
   senão as ações ficam apertadas demais para o dedo. */
@media (max-width: 560px) {
  #netui-fundo { padding: 0; }
  #netui-caixa { max-height: 100vh; height: 100vh; border-radius: 0; width: 100%; }
  .netui-topo { border-radius: 0; }
  .netui-acoes .btn, .netui-rodape .btn { flex: 1 1 100%; }
}

/* Escuro: o portal NAO usa a preferencia do sistema operacional — usa body.theme-dark
   com a chave ui-dark-mode. Ate 02/09/2026 este bloco era @media (prefers-color-scheme:
   dark): num computador com o SO no escuro, o dialogo de rede aparecia CINZA no meio do
   portal claro. As cores tambem eram cinza neutro (#111827/#1f2937/#9ca3af) e nao o oliva
   da marca — o mesmo defeito ja corrigido no Portal do Paciente e no Faturamento.
   Agora sao os tokens de css/16/01-tema-escuro.css, que e o dono unico da paleta escura. */
body.theme-dark #netui-caixa { background: var(--card-bg); color: var(--text-main); }
body.theme-dark .netui-topo,
body.theme-dark .netui-rodape { background: var(--surface); border-color: var(--border); }
body.theme-dark .netui-item { border-color: var(--border); }
body.theme-dark .netui-motivo { background: var(--surface-2); }
body.theme-dark .netui-meta,
body.theme-dark .netui-sub { color: var(--text-muted); }