/* static/css/login.css */

/* =========================
   Base / Layout
========================= */
:root{
  --primary: #007bff;
  --primary-hover: #0056b3;
  --focus: #80bfff;
}

* { box-sizing: border-box; }

body{
  font-family: "Roboto","Segoe UI",Arial,sans-serif;
  background: url("../fundo-login.png") no-repeat center center fixed;
  background-size: cover;

  /* Centralização consistente */
  display: grid;
  place-items: center;

  /* viewport mobile */
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* viewport dinâmico */
  min-height: 100svh;  /* viewport “seguro” iOS */
  padding: 16px;
  margin: 0;
}

/* =========================
   Card
========================= */
.card{
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

/* Fallback para quem não suporta backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .card { background-color: rgba(255, 255, 255, 0.96); }
}

/* =========================
   Tipografia / Form
========================= */
.logo{ max-height: 90px; margin: 0 auto 20px; display: block; }

h4, h5{
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

label{ font-size: 0.95rem; font-weight: 500; }
input{ font-size: 1rem; padding: 0.7rem; }
button{ font-size: 1rem; padding: 0.75rem; border-radius: 8px; }

/* Acessibilidade de foco global */
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* =========================
   Botão primário (identidade)
========================= */
.btn-primary{
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{
  background-color: var(--primary-hover);
}
.btn-primary:focus-visible{
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.35);
}

/* ======== VER SENHA COMO BOTÃO LATERAL ======== */
.btn-eye {
  border: 1px solid #ced4da;  
  color: #6c757d;
  background-color: #fff;
}

.btn-eye:hover {
  background-color: #f8f9fa;
  color: #0056b3;
}

.btn-eye:focus-visible {
  outline: 2px solid #80bfff;
  outline-offset: 0;
}

.input-group .form-control {
  border-right: none;
}

.input-group .form-control:focus {
  border-color: #80bfff;
  box-shadow: none;
}

.input-group:focus-within .btn-eye {
  border-color: #80bfff;
}


/* =========================
   Preferências do usuário
========================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   Responsividade
========================= */
@media (max-width: 576px){
  .card{ padding: 1.5rem; max-width: 90%; }
  h4, h5{ font-size: 1.2rem; }
  label, input, button{ font-size: 0.9rem; }
}