/* RTHVision — Login UI */
:root {
  --bg-start: #081724;
  --bg-end: #0f2a44;
  --accent: #2bc0a3;
  --accent-2: #57d6c2;
  --text-primary: #eaf2f6;
  --text-secondary: #b6c2cc;
  --error: #ff6b6b;
  --success: #3ddc97;
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text-primary);
  background: radial-gradient(800px 800px at 10% 10%, #0a1e33 0%, transparent 60%),
              radial-gradient(600px 600px at 90% 20%, #0a263f 0%, transparent 60%),
              linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

.auth {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 40px 16px;
}

.brand { text-align: center; margin-bottom: 16px }
.brand .logo { width: 240px; height: auto; display: inline-block }
.brand h1 { margin: 12px 0 4px; font-size: 28px; letter-spacing: .4px }
.brand .tagline { margin: 0; color: var(--text-secondary); font-weight: 300 }

.card {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.card h2 { margin: 0 0 16px; font-size: 20px }
.card .sub { margin: 6px 0 18px; color: var(--text-secondary); font-size: 13px }

.field { margin-bottom: 16px }
.field label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 13px }
.field input[type="email"], .field input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input[type="text"], .field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder { color: #8aa0af }
.field input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(43,192,163,.25) }
.error { color: var(--error); font-size: 12px; min-height: 18px; display: block; margin-top: 6px }
.hint { display:block; margin-top:6px; color: var(--text-secondary); font-size: 12px }

.grid { display: grid; grid-template-columns: 1fr; gap: 12px }
/* Mantém os campos sempre em uma única coluna, conforme solicitado */
/* Removido layout de duas colunas em telas maiores */

.input-row { display: flex; align-items: center; gap: 10px }
.field.tight { margin-bottom: 10px }
.input-row .icon {
  width: 22px; height: 22px; flex: 0 0 22px; opacity: .95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}
.input-row input { flex: 1 1 auto }
.icon.user { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23b6c2cc"><path d="M12 12c2.761 0 5-2.686 5-6s-2.239-6-5-6-5 2.686-5 6 2.239 6 5 6zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z"/></svg>') no-repeat center/contain }
.icon.email { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23b6c2cc"><path d="M12 13L2 6h20l-10 7zm0 2l-10-7v12h20V8l-10 7z"/></svg>') no-repeat center/contain }
.icon.phone { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23b6c2cc"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.72 11.72 0 003.68.59 1 1 0 011 1v3.5a1 1 0 01-1 1A17.5 17.5 0 013 6a1 1 0 011-1h3.5a1 1 0 011 1 11.72 11.72 0 00.59 3.68 1 1 0 01-.24 1.01l-2.23 2.1z"/></svg>') no-repeat center/contain }
.icon.lock { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2357d6c2"><path d="M12 1a5 5 0 00-5 5v4H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 9V6a3 3 0 116 0v4H9zm3 3a2 2 0 012 2v3a2 2 0 11-4 0v-3a2 2 0 012-2z"/></svg>') no-repeat center/contain }

.eye-toggle { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.eye-toggle:hover { color: var(--text-primary) }
.eye-toggle:hover { color: var(--text-primary) }

.badge { display:inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(43,192,163,.15); color: var(--accent-2); border: 1px solid rgba(43,192,163,.35); font-size: 12px; }

.animate-pop { animation: pop .25s ease-out }
@keyframes pop { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: scale(1) } }

.row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 18px }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary) }
.link { color: var(--accent-2); text-decoration: none }
.link:hover { text-decoration: underline }

.btn-primary {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  color: #032b27;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
.btn-primary:hover { filter: brightness(1.06) }
.btn-primary:active { transform: translateY(1px) }
.btn-primary:disabled { opacity: .7; cursor: not-allowed }

.btn-primary.loading {
  position: relative;
  pointer-events: none;
}
.btn-primary.loading::after {
  content: '';
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(3, 43, 39, .35);
  border-top-color: #032b27;
  animation: spin .8s linear infinite;
}
@keyframes spin { from { transform: translateY(-50%) rotate(0) } to { transform: translateY(-50%) rotate(360deg) } }

.alt { text-align: center; margin: 12px 0 0; color: var(--text-secondary) }
.status { margin-top: 12px; font-size: 13px }
.status.error { color: var(--error) }
.status.success { color: var(--success) }

.footer { margin-top: 24px; color: var(--text-secondary) }

.hidden { display: none }

@media (min-width: 768px) {
  .brand .logo { width: 260px; height: auto }
  .brand h1 { font-size: 30px }
}