/*
 * Estilos acrescentados na migração para o site (Fases 3 e 5): login, carregamento,
 * erro de conexão e o rodapé de sessão. O CSS original do app fica no <style> do index.html.
 */

/* ---------- login ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(160deg, #15357B 0%, #1C57B5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.gate[hidden] { display: none; }

.gate-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(10, 25, 60, .35);
  padding: 26px 22px 24px;
  width: 100%;
  max-width: 380px;
}

.gate-box img { display: block; height: 34px; margin: 0 auto 18px; }

.gate-box h1 {
  font-size: 17px;
  color: var(--navy);
  text-align: center;
  margin: 0 0 4px;
  font-weight: 800;
}

.gate-box .sub {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.4;
}

.gate-box label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}

.gate-box input {
  width: 100%;
  margin-bottom: 13px;
}

.gate-box button[type="submit"] {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  margin-top: 3px;
}

.gate-box button[type="submit"]:disabled { opacity: .6; }

.gate-erro {
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #9b2c1c;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 13px;
}

.gate-erro[hidden] { display: none; }

/* ---------- carregamento ---------- */
.carregando {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(238, 242, 249, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
}

.carregando[hidden] { display: none; }

.spin {
  width: 30px;
  height: 30px;
  border: 3px solid #c9d6ee;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: gira .8s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* Indicador discreto para gravações em andamento, sem travar a tela. */
.salvando {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;
  background: var(--navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.salvando[hidden] { display: none; }

/* ---------- falha de carregamento ---------- */
.falha {
  max-width: 460px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid #f5c6c0;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.falha h2 { color: #9b2c1c; font-size: 15px; margin: 0 0 8px; }
.falha p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 14px; }

.falha button {
  border: 0;
  border-radius: 11px;
  padding: 11px 20px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  color: #fff;
  background: var(--blue);
}

/* ---------- sessão ---------- */
.sessao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.sessao b { color: var(--navy); }

.sessao .papel {
  background: #eef1f7;
  color: #3a4a63;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Ações que só existem para admin ficam escondidas para o resto da equipe. */
body:not(.admin) [data-somente-admin] { display: none !important; }