/* ---------------------------------------------------------------------------
 * Telas de acesso fora do layout logado: login.php e definir_senha.php.
 * As duas compartilham o mesmo cartão para a pessoa não sentir que trocou
 * de sistema no meio do primeiro acesso.
 * ------------------------------------------------------------------------- */
:root {
  --brand-blue:       #0322d6;
  --brand-cyan:       #65c8f3;
  --brand-red:        #ff001f;
  --brand-yellow:     #ffc000;
  --brand-gradient:   linear-gradient(90deg, #65c8f3, #0322d6, #ff001f, #ffc000);
  --brand-gradient-v: linear-gradient(180deg, #65c8f3, #0322d6, #ff001f, #ffc000);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(101,200,243,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,192,0,.10) 0%, transparent 50%),
    linear-gradient(145deg, #010ea8 0%, #0322d6 55%, #0428e8 100%);
  padding: 1.5rem;
}

/* ── Card wrapper com borda gradiente ── */
.login-outer {
  width: 100%;
  max-width: 420px;
  padding: 3px;
  border-radius: 1.5rem;
  background: var(--brand-gradient);
  box-shadow: 0 24px 60px rgba(3,34,214,.45), 0 4px 16px rgba(0,0,0,.3);
}

.login-card {
  background: #fff;
  border-radius: calc(1.5rem - 3px);
  overflow: hidden;
  border: none;
}

/* ── Faixa gradiente no topo ── */
.login-bar {
  height: 5px;
  background: var(--brand-gradient);
}

/* ── Conteúdo ── */
.login-body {
  padding: 2.25rem 2rem 2rem;
}

.login-icon {
  width: 64px;
  height: 64px;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #e8edff 0%, #d0d8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
}

.login-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(14%) sepia(97%)
          saturate(4900%) hue-rotate(231deg) brightness(91%) contrast(102%);
}

.login-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .25rem;
  letter-spacing: -.02em;
}

.login-sub {
  font-size: .83rem;
  color: #64748b;
}

/* Conta já identificada: etapa da senha e criação da senha no primeiro acesso */
.login-conta {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .6rem;
  padding: .6rem .75rem;
  font-size: .82rem;
  color: #475569;
}

.login-conta-dados {
  flex: 1;
  min-width: 0; /* deixa o text-overflow funcionar dentro do flex */
}

.login-conta strong,
.login-conta-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-conta strong { color: #0f172a; }

.login-conta-trocar {
  flex: none;
  font-size: .75rem;
  color: var(--brand-blue);
  text-decoration: none;
  white-space: nowrap;
}

.login-conta-trocar:hover { text-decoration: underline; }

/* ── Inputs ── */
.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .35rem;
}

.input-group {
  border: 1px solid #e2e8f0;
  border-radius: .6rem;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.input-group:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(3,34,214,.12);
}

.input-group .input-group-text {
  border: none;
  background: #f8fafc;
  color: #94a3b8;
  padding-right: .5rem;
  font-size: .88rem;
  transition: color .15s;
}

.input-group:focus-within .input-group-text {
  color: var(--brand-blue);
}

.input-group .form-control {
  border: none;
  box-shadow: none !important;
  font-size: .88rem;
  padding-left: .35rem;
}

.form-control:focus { box-shadow: none; }

/* ── Botão ── */
.btn-login {
  width: 100%;
  padding: .65rem;
  border: none;
  border-radius: .6rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(90deg, #0322d6 0%, #2a6cdb 100%);
  transition: opacity .2s, transform .15s;
}

.btn-login:hover  { opacity: .92; transform: translateY(-1px); color: #fff; }
.btn-login:active { transform: translateY(0); opacity: 1; }