/* ============================================================
   Padrao visual das telas de autenticacao — Solar Group
   Split responsivo, paleta dourada, tipografia Manrope.
   Compartilhado por: login, esqueci-senha, redefinir-senha, criar-conta.
   ============================================================ */

:root {
  --sun:        #FDDF01;
  --gold-deep:  #EBB80A;
  --gold-text:  #9A7A07;
  --panel-dark: #282826;
  --white:      #FFFFFF;
  --input-bg:   #FAFAF8;
  --text:       #1A1916;
  --muted:      #8B887F;
  --label:      #3A382F;
  --border:     #E7E5DD;
  --divider:    #ECECEC;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---------- Painel de marca ---------- */
.brand {
  position: relative;
  overflow: hidden;
  background: var(--panel-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px;
  text-align: center;
}

.brand__glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(253,223,1,0.20) 0%, rgba(253,223,1,0.06) 38%, transparent 66%);
  animation: pulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* Simbolo oficial Solar Group (sol dourado). */
.sol-img {
  background-image: url('../img/sol-marca.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.brand__sun {
  position: relative;
  width: 168px;
  height: 168px;
  filter: drop-shadow(0 12px 40px rgba(235,184,10,0.45));
  animation: float 7s ease-in-out infinite;
}
.brand__sun-img {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: spin 44s linear infinite;
}

.brand__headline {
  position: relative;
  margin-top: 40px;
  color: var(--white);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 360px;
}
.brand__sub {
  position: relative;
  margin-top: 14px;
  color: rgba(255,255,255,0.62);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  max-width: 330px;
}

.brand__signature {
  position: relative;
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sun);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
}
.brand__signature::before,
.brand__signature::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(253,223,1,0.5);
}

/* ---------- Painel de formulario ---------- */
.form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--white);
}

.form-card {
  width: 100%;
  max-width: 392px;
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Logo horizontal (visivel sobre branco) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.logo__mark { width: 40px; height: 40px; }
.logo__word { line-height: 1; }
.logo__word .top {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.logo__word .bottom {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--gold-text);
  margin-top: 2px;
}

h1 {
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.025em;
  color: var(--text);
}
.subtitle {
  margin-top: 8px;
  margin-bottom: 28px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.5;
}

/* Flash messages */
.flash-area { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.flash {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}
.flash--success { background: #f0fbf4; border-color: #bfe9cd; color: #1c5733; }
.flash--error   { background: #fdf2f3; border-color: #f3c6cb; color: #8a2330; }
.flash--warning { background: #fffbf0; border-color: #f1e0b0; color: #7a5b06; }
.flash--info    { background: #fffdf4; border-color: #f0e4b8; color: var(--gold-text); }
.flash button {
  border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: currentColor; opacity: 0.5;
}
.flash button:hover { opacity: 1; }

.field { margin-bottom: 18px; }
.field__top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 7px;
}
label {
  font-weight: 700;
  font-size: 13px;
  color: var(--label);
}

.input-wrap { position: relative; }
input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.has-toggle input { padding-right: 84px; }
input::placeholder { color: #b8b5ac; font-weight: 500; }
input:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #FFFDF4;
  box-shadow: 0 0 0 4px rgba(235,184,10,0.16);
}

.toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--gold-text);
  padding: 6px 8px;
  border-radius: 8px;
}
.toggle-pw:hover { background: rgba(235,184,10,0.10); }

/* Dica / requisitos abaixo de um campo */
.field__hint {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.help-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 22px;
}
.help-row .muted-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-text);
}

/* Link dourado reutilizavel (help-row, linhas alternativas) */
.link-gold {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: none;
}
.link-gold:hover { text-decoration: underline; }

.btn-entrar {
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  color: var(--text);
  background: linear-gradient(135deg, #FDDF01, #EBB80A);
  box-shadow: 0 4px 14px rgba(235,184,10,0.30);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn-entrar:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(235,184,10,0.42);
}
.btn-entrar:active { transform: translateY(0); }

/* Linha alternativa centralizada ("Ja tem conta? Entrar") */
.alt-line {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.restricted {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.foot {
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #b6b3aa;
}

/* ---------- Animacoes ---------- */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes rise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .brand__sun, .brand__sun-img, .brand__glow, .form-card { animation: none; }
}

/* ---------- Mobile (<=900px) ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .brand { display: none; }
  .form-pane { padding: 40px 22px; min-height: 100vh; }
}