/* ==========================================================================
   SAI — o MÓDULO (Leva B)
   A barreira tem folha própria: public/css/sai-barreira.css.

   SEM CDN e sem fonte externa (ambiente sem internet). Sem cor cravada onde o
   ARGUS já tem variável de tema — a tela precisa funcionar em claro e escuro
   como o resto do sistema.

   MOBILE: a tabela de militares rola dentro do próprio bloco
   (`overflow-x: auto`), nunca faz a página rolar de lado. Em 390px as
   linhas viram cartões — tabela de 5 colunas em 390px é ilegível, e dado
   disciplinar lido errado é pior que dado não lido.
   ========================================================================== */

/* ── avisos ─────────────────────────────────────────────────────────────── */
.sai-aviso {
  border-left: 4px solid var(--cor-borda, #999);
  padding: .75rem 1rem;
  margin: 0 0 1rem;
  font-size: .92rem;
  line-height: 1.45;
  background: var(--cor-fundo-alt, rgba(127,127,127,.08));
  border-radius: 0 4px 4px 0;
}
.sai-aviso p { margin: .5rem 0 0; }
.sai-aviso--leitura  { border-left-color: #6b7f9e; }
.sai-aviso--atencao  { border-left-color: #b8860b; }
/* O bloqueio é o aviso de "perfil sem visibilidade". Vermelho contido: é
   informação, não erro do usuário — ele não fez nada de errado. */
.sai-aviso--bloqueio { border-left-color: #8b2020; }

/* ── abas ───────────────────────────────────────────────────────────────── */
.sai-abas {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--cor-borda, rgba(127,127,127,.35));
  margin-bottom: 1rem;
  overflow-x: auto;
}
.sai-aba {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--cor-texto-suave, #777);
  cursor: pointer;
  white-space: nowrap;
}
.sai-aba:hover { color: var(--cor-texto, inherit); }
.sai-aba--ativa {
  color: var(--cor-texto, inherit);
  border-bottom-color: #8b2020;
}

/* ── barra de busca ─────────────────────────────────────────────────────── */
.sai-barra {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.sai-busca {
  flex: 1 1 16rem;
  min-width: 0;            /* sem isto o input estoura o flex no mobile */
  padding: .5rem .7rem;
  font: inherit;
}

/* ── botões ─────────────────────────────────────────────────────────────── */
.sai-btn {
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cor-borda, rgba(127,127,127,.5));
  background: var(--cor-fundo, #fff);
  color: var(--cor-texto, #222);
  border-radius: 3px;
}
.sai-btn:hover { filter: brightness(.96); }
/* Cor explícita nos dois: o ARGUS tem estilo global para
   `button[type=submit]` que já deixou o botão da barreira branco sobre branco
   (adendo da Leva A). Aqui a cor do texto vem cravada junto com o fundo para
   não haver como um herdar sem o outro. */
.sai-btn--principal { background: #4a0d0d; border-color: #4a0d0d; color: #fff; }
.sai-btn--atencao   { background: #7a5200; border-color: #7a5200; color: #fff; }
.sai-btn--caixa {
  margin-top: .5rem;
  border-style: dashed;
  width: 100%;
  text-align: center;
}
.sai-voltar {
  background: none; border: none; padding: .3rem 0;
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--cor-texto-suave, #777);
}
.sai-voltar:hover { color: var(--cor-texto, inherit); }

/* ── tabela ─────────────────────────────────────────────────────────────── */
.sai-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
.sai-tabela th, .sai-tabela td {
  padding: .55rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--cor-borda, rgba(127,127,127,.25));
}
.sai-tabela th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.sai-tabela .sai-num { text-align: right; }
.sai-linha { cursor: pointer; }
.sai-linha:hover { background: var(--cor-fundo-alt, rgba(127,127,127,.07)); }
.sai-linha:focus-visible { outline: 2px solid #8b2020; outline-offset: -2px; }

/* ── ficha do militar ───────────────────────────────────────────────────── */
.sai-ficha__cabecalho { margin: .5rem 0 1.25rem; }
.sai-ficha__cabecalho h3 { margin: .25rem 0 .5rem; }
.sai-ficha__dados {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-size: .93rem;
}
.sai-ficha__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.sai-rotulo {
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave, #777);
}
.sai-secao {
  margin: 1.75rem 0 .75rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--cor-borda, rgba(127,127,127,.3));
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sai-contador {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .45rem;
  border-radius: 10px;
  font-size: .8rem;
  background: var(--cor-fundo-alt, rgba(127,127,127,.15));
}

/* ── fato ───────────────────────────────────────────────────────────────── */
.sai-fato {
  border: 1px solid var(--cor-borda, rgba(127,127,127,.3));
  border-radius: 4px;
  padding: .8rem .9rem;
  margin-bottom: 1rem;
}
.sai-fato__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin-bottom: .7rem;
}
.sai-fato__data { font-weight: 700; }
.sai-fato__tipo { font-weight: 600; }
.sai-fato__local,
.sai-fato__envolvidos { font-size: .87rem; color: var(--cor-texto-suave, #777); }

.sai-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.sai-tag--relint  { color: #2c5f8a; }
.sai-tag--proprio { color: #5f6a2c; }

/* ── caixas de atualização: a linha do tempo ────────────────────────────── */
/* A régua vertical à esquerda é o que faz várias caixas se lerem como
   acréscimos ao mesmo assunto, e não como registros soltos. */
.sai-caixas {
  border-left: 2px solid var(--cor-borda, rgba(127,127,127,.35));
  padding-left: .9rem;
  margin-left: .3rem;
}
.sai-caixa { padding: .1rem 0 .8rem; position: relative; }
.sai-caixa::before {
  content: '';
  position: absolute;
  left: -1.23rem; top: .45rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--cor-borda, #999);
}
.sai-caixa__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  font-size: .78rem;
  color: var(--cor-texto-suave, #777);
  margin-bottom: .2rem;
}
.sai-caixa__autor { font-weight: 600; }
.sai-caixa__texto { font-size: .94rem; line-height: 1.5; white-space: normal; }
.sai-caixa--vazia { color: var(--cor-texto-suave, #777); font-style: italic; }
.sai-caixa--vazia::before { display: none; }

/* ── formulários ────────────────────────────────────────────────────────── */
.sai-form {
  border: 1px solid var(--cor-borda, rgba(127,127,127,.4));
  border-radius: 4px;
  padding: 1rem;
  margin: 0 0 1.25rem;
  background: var(--cor-fundo-alt, rgba(127,127,127,.05));
}
.sai-form--atencao { border-color: #b8860b; }
.sai-form h3 { margin: 0 0 .9rem; font-size: 1rem; }
.sai-form__linha {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: .8rem;
}
.sai-form label {
  display: block;
  flex: 1 1 14rem;
  min-width: 0;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave, #777);
}
.sai-form input, .sai-form select, .sai-form textarea {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .5rem;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cor-texto, inherit);
}
.sai-form textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.sai-form__campo-fixo { flex: 1 1 14rem; font-size: .93rem; }
.sai-form__campo-fixo .sai-valor { font-weight: 700; }
.sai-form__campo-fixo small {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--cor-texto-suave, #777);
}
.sai-form__acoes {
  display: flex;
  flex-wrap: wrap-reverse;   /* o botão principal nunca cai ABAIXO do cancelar */
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
}
.sai-form__erro {
  margin-top: .7rem;
  padding: .5rem .7rem;
  border-left: 4px solid #8b2020;
  background: rgba(139, 32, 32, .1);
  font-size: .9rem;
}

/* ── relógio ────────────────────────────────────────────────────────────── */
.sai-relogio {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
}
.sai-relogio--acabando { color: #b03030; }

/* ══ 600px ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* A tabela vira cartões. `display: block` nas células + rótulo pelo
     `data-rotulo` do cabeçalho: cinco colunas em 390px sairiam ilegíveis, e
     rolagem lateral numa tabela de leitura é pior que empilhar. */
  .sai-tabela thead { display: none; }
  .sai-tabela, .sai-tabela tbody, .sai-tabela tr, .sai-tabela td { display: block; width: 100%; }
  .sai-tabela tr {
    border: 1px solid var(--cor-borda, rgba(127,127,127,.3));
    border-radius: 4px;
    padding: .5rem .6rem;
    margin-bottom: .6rem;
  }
  .sai-tabela td { border: none; padding: .15rem 0; }
  .sai-tabela td:first-child { font-weight: 700; font-size: 1rem; }
  .sai-tabela .sai-num { text-align: left; }
  .sai-tabela td[data-rotulo]::before {
    content: attr(data-rotulo) ': ';
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave, #777);
  }

  .sai-form__linha { flex-direction: column; gap: .7rem; }
  .sai-form__acoes .sai-btn { flex: 1 1 auto; }
  .sai-barra { flex-direction: column; align-items: stretch; }
  .sai-fato { padding: .7rem .6rem; }
  .sai-caixas { padding-left: .75rem; }
}