/* ==========================================================================
   Telemix CSS — login.css (Tela de autenticação)
   ========================================================================== */

/**
 * Escopo: estilos exclusivos da tela de login.
 * Mantém o cartão centralizado, efeitos sutis e responsividade básica.
 */

/* LOGIN */
#view-login{display:block}
#view-dashboard{display:none}

.card{ position:relative; z-index:1; width:min(92vw, 520px); padding:28px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border:1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); }
.top-bar{ display:none; align-items:center; margin-bottom:14px; }
.top-bar.visible{ display:flex; }
.back-btn{ background:transparent; border:1px solid var(--card-border); border-radius:10px; padding:8px 12px; color:var(--text); font-size:14px; cursor:pointer; transition: all var(--transition); }
.back-btn:hover{ border-color: rgba(122,162,255,.45); transform: translateY(-1px); }
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.logo{ width:36px; height:36px; border-radius:8px; flex-shrink:0; background-image: url(/home/assets/img/icone.png); background-size: cover; background-position: center; }

#view-login .logo { position: relative; bottom: 9px; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; min-height:36px; }
.title{ font-weight:700; font-size:22px }
.subtitle{ color:var(--muted); margin:0 0 20px; font-size:14px }
.actions{ display:flex; gap:10px; margin-top:6px }
.divider{ height:1px; background:var(--card-border); margin:18px 0 0 }
#view-login form{
  display:none;
  opacity:0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}
#view-login form.visible{
  display:block;
  opacity:1;
  transform: translateY(0);
}

.field{ display:grid; gap:8px; margin-top:16px }
.label{ font-size:13px; color: var(--muted) }
.input{ width:100%; padding:12px 14px; color:var(--text); background: #0f131a; border:1px solid var(--card-border); border-radius: 12px; }
.continue{ margin-top:18px; width:100%; padding:12px 16px; border-radius:12px; border:0; cursor:not-allowed; background: #1a1f2a; color:#9ba3af; }
.continue.enabled{ cursor:pointer; background: linear-gradient(180deg, var(--brand), var(--brand-strong)); color:#fff }

/* Em telas pequenas o card precisa de margem para rolar */
@media (max-width: 900px){
  .card{ margin:40px auto; }
}

.field-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.field-remember label {
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.field-remember input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  width: 16px;
  height: 16px;
}