/* =========================
   LOGIN - VestPolo
   Arquivo: css/login_style.css
   ========================= */

:root{
  --vp-bg: #f7f7fb;
  --vp-card: #ffffff;
  --vp-text: #141414;
  --vp-muted: #666;

  --vp-primary: #b00000;
  --vp-primary-dark: #8f0000;

  --vp-border: rgba(0,0,0,.10);
  --vp-shadow: 0 14px 40px rgba(0,0,0,.08);

  --vp-radius: 16px;
  --vp-focus: 0 0 0 4px rgba(176, 0, 0, .15);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(176,0,0,.06), transparent 60%),
    radial-gradient(700px 420px at 90% 10%, rgba(0,0,0,.04), transparent 55%),
    var(--vp-bg);
  color: var(--vp-text);
}

/* Container do login */
.container{
  width: min(420px, 92%);
  margin: clamp(40px, 8vh, 90px) auto;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  padding: clamp(22px, 4vw, 30px);
  backdrop-filter: blur(8px);
}

/* Título */
.container h1{
  margin: 0 0 14px;
  font-size: clamp(24px, 3.2vw, 30px);
  letter-spacing: -0.02em;
  color: var(--vp-primary);
  text-align: center;
}

/* Erro */
.container p[style*="color:red"]{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(176,0,0,.08);
  border: 1px solid rgba(176,0,0,.25);
  color: var(--vp-primary-dark) !important;
  font-weight: 700;
  text-align: center;
}

/* Form */
.container form{
  display: grid;
  gap: 10px;
}

/* Labels */
.container label{
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

/* Inputs */
.container input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--vp-border);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.container input:focus{
  border-color: rgba(176,0,0,.35);
  box-shadow: var(--vp-focus);
}

/* Botão */
.container button{
  height: 46px;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--vp-primary), var(--vp-primary-dark));
}

.container button:hover{
  filter: brightness(.97);
}

/* Recuperar senha */
.recuperar-senha{
  margin-top: 10px;
  text-align: center;
}

.recuperar-senha a{
  font-size: 13px;
  color: var(--vp-primary);
  text-decoration: none;
  font-weight: 600;
}

.recuperar-senha a:hover{
  text-decoration: underline;
}

/* Link cadastro */
.container p a{
  color: var(--vp-primary);
  font-weight: 700;
  text-decoration: none;
}

.container p a:hover{
  text-decoration: underline;
}