/* ============================================================
   ATENDE CIDADÃO – Prefeitura de Ouro Branco / MG
   Tela de login – layout de DUAS COLUNAS (modernizado 2026-07)
   GLPI 10.0.15  |  Cores: verde #3e9c41 · laranja #f5a623
   ============================================================ */

:root {
  --ob-verde:        #3e9c41;
  --ob-verde-escuro: #2f7d33;
  --ob-verde-fundo:  #1f5326;
  --ob-laranja:      #f5a623;
  --ob-laranja-esc:  #d98c0f;
  --ob-laranja-tint: #fff6e6;
  --ob-ink:          #16241b;
  --ob-muted:        #6a7670;
  --ob-line:         #e4eae4;
  --ob-field-line:   #d6ddd7;
}

/* Tipografia consistente com o app (Inter, já disponível via a paleta; fallback seguro) */
.ob-login-card,
.ob-login-card h1, .ob-login-card h2, .ob-login-card p,
.ob-login-card input, .ob-login-card button, .ob-login-card a, .ob-login-card label {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* Esconde o logo padrão do GLPI (usamos o nosso dentro do card) */
.page-anonymous .glpi-logo { display: none !important; }

/* Card largo cabe bem */
.page-anonymous .container-tight {
  max-width: 60rem !important;
  width: 100%;
}

/* ---------- Cartão externo ---------- */
.ob-login-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(20, 50, 28, 0.45);
  border: 1px solid var(--ob-line);
}
.ob-login-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 560px;
}

/* ===================== COLUNA ESQUERDA (verde) ===================== */
.ob-login-side {
  position: relative;
  color: #fff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(155deg, var(--ob-verde) 0%, var(--ob-verde-escuro) 55%, var(--ob-verde-fundo) 100%);
  overflow: hidden;
}
.ob-login-side::before {   /* halos de luz suaves */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 260px at 12% 8%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(360px 300px at 100% 100%, rgba(0,0,0,0.18), transparent 55%);
  pointer-events: none;
}
.ob-login-side::after {    /* motivo geométrico discreto */
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px;
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 32px; transform: rotate(25deg);
  box-shadow: 40px 40px 0 -2px rgba(255,255,255,0.06);
  pointer-events: none;
}
.ob-login-side > * { position: relative; z-index: 1; }

/* Logo com letras brancas — vai direto sobre o painel verde (sem fundo branco) */
.ob-brand-chip {
  padding: 0;
  width: max-content;
}
.ob-brand-chip img { display: block; height: 60px; width: auto; }

.ob-side-title {
  color: #fff !important;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.ob-side-text {
  color: rgba(255,255,255,0.92);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 22px;
}

.ob-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ob-feats li { display: flex; align-items: center; gap: 13px; font-size: 0.94rem; color: rgba(255,255,255,0.96); }
.ob-feat-ic {
  flex: 0 0 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14);
  border-radius: 10px;
}
.ob-feat-ic svg { width: 17px; height: 17px; stroke: var(--ob-laranja); fill: none; stroke-width: 2; }

.ob-side-trust {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 14px; margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
}
.ob-side-trust svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; opacity: 0.9; }

/* ===================== COLUNA DIREITA (formulário) ===================== */
.ob-login-form {
  background: #fff;
  padding: 44px 42px;
  display: flex; flex-direction: column; justify-content: center;
}
.ob-form-title { color: var(--ob-ink) !important; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.ob-form-subtitle { color: var(--ob-muted); font-size: 0.9rem; margin: 0 0 26px; }

.ob-login-form .form-label {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--ob-ink); font-weight: 600; font-size: 0.8rem; margin: 0 0 7px;
}
.ob-login-form .form-label-description a,
.ob-login-form .form-label a { color: var(--ob-verde); font-weight: 600; font-size: 0.78rem; text-decoration: none; }

/* Campos com ícone à esquerda */
.ob-input-icon { position: relative; margin-bottom: 16px; }
.ob-input-icon > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--ob-muted); fill: none; stroke-width: 2;
  pointer-events: none;
}
.ob-input-icon .form-control {
  height: 50px;
  padding-left: 42px !important;
  border-radius: 12px;
  border: 1.5px solid var(--ob-field-line);
  font-size: 0.94rem;
}
.ob-input-icon .form-control:focus {
  border-color: var(--ob-verde);
  box-shadow: 0 0 0 4px rgba(62,156,65,0.16);
}

/* Checkbox lembrar-me */
.ob-login-form .form-check { margin: 2px 0 20px; }
.ob-login-form .form-check-label { color: var(--ob-muted); font-size: 0.86rem; }
.ob-login-form .form-check-input:checked { background-color: var(--ob-verde); border-color: var(--ob-verde); }

/* ---------- Botões ---------- */
.ob-btn-entrar {
  background: var(--ob-verde) !important;
  border-color: var(--ob-verde) !important;
  height: 50px; border-radius: 12px; font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 10px 22px -8px rgba(47,125,51,0.7);
  transition: transform .12s, background .18s;
}
.ob-btn-entrar:hover { background: var(--ob-verde-escuro) !important; border-color: var(--ob-verde-escuro) !important; }
.ob-btn-entrar:active { transform: translateY(1px); }

.ob-btn-cadastro {
  background: #fff !important;
  color: var(--ob-laranja-esc) !important;
  border: 1.5px solid var(--ob-laranja) !important;
  height: 50px; border-radius: 12px; font-weight: 700;
  transition: background .18s, color .18s;
}
.ob-btn-cadastro:hover { background: var(--ob-laranja) !important; color: #fff !important; }

.ob-login-form .form-footer { margin-top: 12px; }

/* ---------- Divisor + AÇÃO DE VALIDAÇÃO EM DESTAQUE ---------- */
.ob-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 16px;
  color: var(--ob-muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.ob-divider::before, .ob-divider::after { content: ""; height: 1px; flex: 1; background: var(--ob-line); }

.ob-validar {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-decoration: none;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(90deg, var(--ob-laranja-tint), #fffdf8);
  border: 1.5px solid var(--ob-laranja);
  box-shadow: 0 12px 26px -14px rgba(217,140,15,0.75);
  transition: transform .14s, box-shadow .18s;
}
.ob-validar:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(217,140,15,0.85); }
.ob-validar-ic {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ob-laranja), var(--ob-laranja-esc));
  box-shadow: 0 6px 14px -4px rgba(217,140,15,0.8);
}
.ob-validar-ic svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.ob-validar-txt { flex: 1; line-height: 1.3; }
.ob-validar-txt b { display: block; font-size: 0.98rem; color: var(--ob-ink); font-weight: 700; }
.ob-validar-txt span { display: block; font-size: 0.8rem; color: var(--ob-muted); margin-top: 2px; }
.ob-validar-arrow { color: var(--ob-laranja-esc); font-size: 1.5rem; line-height: 1; }

/* FAQ / texto extra */
.ob-text-login { margin-top: 1rem; font-size: 0.85rem; color: #555; }
.ob-login-form .btn-outline-secondary.btn-icon { margin-top: 18px; border-radius: 10px; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 820px) {
  .ob-login-grid { grid-template-columns: 1fr; }
  .ob-login-side { padding: 34px 28px; }
  .ob-login-side::after { display: none; }
  .ob-login-form { padding: 34px 26px; }
  .ob-side-trust { display: none; }
}