/* ================================================================
   login.css — Morangueiro Auth Pages
   Usado em: /auth/login  /auth/2fa/verify
   ================================================================ */

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

/* ── Tokens — light ─────────────────────────────────────────── */
:root {
  /* Marca */
  --mg-red:          #C0392B;
  --mg-red-dark:     #a93226;
  --mg-red-deep:     #8C0000;

  /* Página */
  --mg-page-bg:      #f0f2f6;

  /* Card */
  --mg-card-bg:      #ffffff;
  --mg-card-shadow:
    0 1px 3px  rgba(0,0,0,.07),
    0 8px 24px rgba(0,0,0,.09),
    0 20px 48px rgba(0,0,0,.06);

  /* Logo */
  --mg-logo-bg:      #fff5f5;
  --mg-logo-border:  #fde0de;

  /* Tipografia */
  --mg-title:        #1a1c23;
  --mg-subtitle:     #9aa3b2;
  --mg-label:        #5a6279;

  /* Separador */
  --mg-sep:          #f0f2f6;

  /* Input */
  --mg-input-border: #e4e7ef;
  --mg-input-bg:     #fafbfc;
  --mg-input-focus:  #ffffff;
  --mg-input-color:  #1a1c23;
  --mg-placeholder:  #b8bece;
  --mg-icon-color:   #c0c7d4;

  /* Checkbox */
  --mg-check-label:  #5a6279;

  /* Rodapé */
  --mg-footer-sep:   #f0f2f6;
  --mg-footer-link:  #9aa3b2;

  /* Dica / hint box */
  --mg-hint-bg:      #fafbfc;
  --mg-hint-border:  #f0f2f6;
  --mg-hint-title:   #5a6279;
  --mg-hint-body:    #9aa3b2;
  --mg-trust-note:   #b8bece;
}

/* ── Tokens — dark (OS preference) ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --mg-page-bg:      #0d0f15;
    --mg-card-bg:      #161820;
    --mg-card-shadow:
      0 1px 3px  rgba(0,0,0,.45),
      0 8px 24px rgba(0,0,0,.55),
      0 20px 48px rgba(0,0,0,.45);
    --mg-logo-bg:      #2a1515;
    --mg-logo-border:  #4d2020;
    --mg-title:        #e8eaf0;
    --mg-subtitle:     #7a8497;
    --mg-label:        #8a93a8;
    --mg-sep:          #23262f;
    --mg-input-border: #2a2d3a;
    --mg-input-bg:     #0f1118;
    --mg-input-focus:  #161820;
    --mg-input-color:  #e8eaf0;
    --mg-placeholder:  #3d4357;
    --mg-icon-color:   #3d4357;
    --mg-check-label:  #8a93a8;
    --mg-footer-sep:   #23262f;
    --mg-footer-link:  #7a8497;
    --mg-hint-bg:      #0f1118;
    --mg-hint-border:  #23262f;
    --mg-hint-title:   #8a93a8;
    --mg-hint-body:    #6a7385;
    --mg-trust-note:   #4a5468;
  }
}

/* ── Página base ────────────────────────────────────────────── */
body.login-page {
  background: var(--mg-page-bg) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color-scheme: light dark;
}

/* ── Contêiner ──────────────────────────────────────────────── */
.mg-login-wrap {
  width: 100%;
  max-width: 400px;
}

/* ── Card ───────────────────────────────────────────────────── */
.mg-card {
  background: var(--mg-card-bg);
  border-radius: 14px;
  box-shadow: var(--mg-card-shadow);
  overflow: hidden;
}

/* Barra de acento no topo */
.mg-card-bar {
  height: 5px;
  background: linear-gradient(90deg, #6b0000 0%, #C0392B 60%, #e05c4a 100%);
}

/* ── Cabeçalho ──────────────────────────────────────────────── */
.mg-header {
  padding: 36px 32px 26px;
  text-align: center;
}

.mg-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: var(--mg-logo-bg);
  border-radius: 50%;
  margin-bottom: 18px;
  border: 2px solid var(--mg-logo-border);
}

.mg-logo-wrap img {
  height: 46px;
  width: auto;
  object-fit: contain;
}

.mg-header h2 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--mg-title);
  letter-spacing: .07em;
  margin: 0 0 5px;
}

.mg-header p {
  font-size: .82rem;
  color: var(--mg-subtitle);
  margin: 0;
}

.mg-header p strong {
  color: var(--mg-title);
}

/* ── Divisor ────────────────────────────────────────────────── */
.mg-sep {
  height: 1px;
  background: var(--mg-sep);
  margin: 0 32px;
}

/* ── Formulário ─────────────────────────────────────────────── */
.mg-form {
  padding: 26px 32px 30px;
}

.mg-field {
  margin-bottom: 18px;
}

.mg-field > label {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  color: var(--mg-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
}

/* ── Input ──────────────────────────────────────────────────── */
.mg-input-wrap {
  position: relative;
}

.mg-input {
  width: 100%;
  border: 1.5px solid var(--mg-input-border);
  border-radius: 9px;
  padding: 10px 40px 10px 14px;
  font-size: .9rem;
  color: var(--mg-input-color);
  background: var(--mg-input-bg);
  transition: border-color .18s, box-shadow .18s, background .18s;
  outline: none;
  display: block;
}

.mg-input:focus {
  border-color: var(--mg-red);
  background: var(--mg-input-focus);
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}

.mg-input::placeholder {
  color: var(--mg-placeholder);
  font-size: .87rem;
}

.mg-input-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: var(--mg-icon-color);
  pointer-events: none;
}

.mg-input-icon.clickable {
  pointer-events: auto;
  cursor: pointer;
  transition: color .15s;
}

.mg-input-icon.clickable:hover { color: var(--mg-red); }

.mg-input-icon .icon-inner {
  display: inline-block;
  transition: opacity .15s ease, transform .15s ease;
}

.mg-input-icon .icon-inner.fading {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}

/* ── Ações (checkbox + botão) ───────────────────────────────── */
.mg-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

/* ── Checkbox ───────────────────────────────────────────────── */
.mg-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.mg-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--mg-red);
  cursor: pointer;
  flex-shrink: 0;
}

.mg-check span {
  font-size: .83rem;
  color: var(--mg-check-label);
}

/* ── Botão ──────────────────────────────────────────────────── */
.mg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mg-red);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 22px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .1s;
  white-space: nowrap;
}

.mg-btn:hover {
  background: var(--mg-red-dark);
  box-shadow: 0 4px 16px rgba(192,57,43,.32);
  transform: translateY(-1px);
}

.mg-btn:active {
  background: var(--mg-red-deep);
  transform: translateY(0);
  box-shadow: none;
}

.mg-btn-block {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* ── Rodapé ─────────────────────────────────────────────────── */
.mg-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--mg-footer-sep);
}

.mg-footer a {
  font-size: .8rem;
  color: var(--mg-footer-link);
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mg-footer a:hover { color: var(--mg-red); }

.mg-footer-center {
  justify-content: center;
}

.mg-footer-center > a {
  color: #e05c4a;
}

.mg-footer-center > a:hover { color: var(--mg-red-deep); }

/* ── Componentes exclusivos de 2FA (verify_2fa.html) ────────── */

/* Campo de código grande */
.mg-otp-input {
  letter-spacing: .48em;
  font-size: 1.3rem;
  text-align: center;
  font-weight: 700;
  padding-right: 40px;
}

/* Nota abaixo do checkbox de confiança */
.mg-trust-note {
  font-size: .76rem;
  color: var(--mg-trust-note);
  margin: 6px 0 0 23px;
  line-height: 1.4;
}

/* Caixa informativa "Não tem o app?" */
.mg-app-hint {
  background: var(--mg-hint-bg);
  border: 1px solid var(--mg-hint-border);
  border-radius: 9px;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.mg-app-hint-title {
  font-size: .77rem;
  font-weight: 700;
  color: var(--mg-hint-title);
  margin: 0 0 4px;
}

.mg-app-hint-title i {
  color: var(--mg-red);
  margin-right: 4px;
}

.mg-app-hint-body {
  font-size: .75rem;
  color: var(--mg-hint-body);
  margin: 0;
  line-height: 1.5;
}

.mg-app-hint-body strong {
  color: var(--mg-hint-title);
}