/* ==========================================================
   CK FACTORING - TELA DE LOGIN RESPONSIVA
   ========================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 24px;

  overflow-x: hidden;
}

/* ==========================================================
   CAIXA DE LOGIN
   ========================================================== */

.login {
  width: 100%;
  max-width: 420px;

  margin: 0 auto;
  padding: 30px;

  background: #ffffff;
  border-radius: 10px;

  box-shadow: 0 0 10px #aaa;
}

/* ==========================================================
   TÍTULO
   ========================================================== */

.titulo-login {
  width: calc(100% + 60px);

  margin: -30px -30px 25px;
  padding: 18px;

  background: #5f6b7a;
  color: #ffffff;

  border-radius: 10px 10px 0 0;

  text-align: center;
}

.titulo-login h2 {
  margin: 0;

  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.2;

  font-weight: bold;
  letter-spacing: 1px;
}

/* ==========================================================
   FORMULÁRIO
   ========================================================== */

.login form {
  width: 100%;
}

.linha {
  width: 100%;
  margin-bottom: 15px;
}

.linha label {
  display: block;

  width: auto;

  margin-bottom: 6px;

  font-weight: bold;
}

.linha input {
  display: block;

  width: 100%;
  max-width: 100%;

  min-height: 44px;

  padding: 10px;

  font-size: 16px;
}

/* ==========================================================
   BOTÃO
   ========================================================== */

.login button {
  width: 100%;

  min-height: 44px;

  padding: 10px;

  background: #0066cc;
  color: #ffffff;

  border: none;
  border-radius: 4px;

  font-size: 15px;

  cursor: pointer;
}

.login button:hover {
  background: #005bb5;
}

button:disabled {
  opacity: 0.7;
  cursor: wait !important;
}

/* ==========================================================
   ESQUECI / VOLTAR LOGIN
   ========================================================== */

.esqueci-senha,
.voltar-login {
  text-align: center;
  margin-top: 14px;
}

.esqueci-senha a,
.voltar-login a {
  color: #2563eb;

  font-size: 14px;

  text-decoration: none;
}

.esqueci-senha a:hover,
.voltar-login a:hover {
  text-decoration: underline;
}

/* ==========================================================
   RECUPERAÇÃO DE SENHA
   ========================================================== */

.subtitulo-recuperacao {
  margin: 0 0 22px;

  text-align: center;

  color: #64748b;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.5;
}

.aviso {
  width: 100%;

  margin-top: 16px;
  padding: 12px 14px;

  border-radius: 6px;

  font-size: 14px;
  line-height: 1.5;

  text-align: center;

  overflow-wrap: break-word;
}

.aviso.ok {
  background: #dcfce7;
  color: #166534;
}

.aviso.erro {
  background: #fee2e2;
  color: #991b1b;
}

/* ==========================================================
   TABLETS E CELULARES
   ========================================================== */

@media (max-width: 600px) {
  body {
    padding: 20px 16px;
  }

  .login {
    max-width: 100%;
  }

  .titulo-login h2 {
    font-size: 24px;
  }

  .linha {
    margin-bottom: 14px;
  }
}

/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 400px) {
  body {
    padding: 16px 12px;
  }

  .login {
    padding: 24px 20px;
  }

  .titulo-login {
    width: calc(100% + 40px);

    margin: -24px -20px 22px;
  }

  .titulo-login h2 {
    font-size: 22px;
  }

  .linha label {
    font-size: 13px;
  }

  .linha input {
    min-height: 46px;

    padding: 10px 12px;
  }

  .login button {
    min-height: 46px;
  }

  .esqueci-senha a,
  .voltar-login a {
    font-size: 13px;
  }

  .subtitulo-recuperacao {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .aviso {
    font-size: 13px;
    padding: 11px 12px;
  }
}

/* ==========================================================
   TELAS COM POUCA ALTURA
   ========================================================== */

@media (max-height: 600px) {
  body {
    align-items: flex-start;

    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ==========================================================
   DISPOSITIVOS COM TOQUE
   ========================================================== */

@media (pointer: coarse) {
  .login input,
  .login button {
    min-height: 46px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f4f6;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  padding: 20px;
}

/* Caixa do login */
.login {
  width: 100%;
  max-width: 400px;

  background: #ffffff;

  padding: 32px;

  border-radius: 14px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Título */
.titulo-login {
  text-align: center;
  margin-bottom: 28px;
}

.titulo-login h2 {
  margin: 0;

  font-size: 28px;
  font-weight: 700;

  color: #1f2937;
}

/* Linha dos campos */
.linha {
  margin-bottom: 18px;
}

.linha label {
  display: block;

  margin-bottom: 7px;

  font-size: 14px;
  font-weight: 600;

  color: #374151;
}

.linha input {
  width: 100%;

  height: 46px;

  padding: 0 13px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;

  color: #111827;

  font-size: 16px;

  outline: none;

  transition: 0.2s;
}

.linha input:focus {
  border-color: #2563eb;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Botão */
button[type="submit"] {
  width: 100%;

  height: 46px;

  border: none;
  border-radius: 8px;

  background: #2563eb;

  color: #ffffff;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.2s;
}

button[type="submit"]:hover {
  background: #1d4ed8;
}

button[type="submit"]:active {
  transform: scale(0.98);
}

/* Esqueci a senha */
.esqueci-senha {
  text-align: center;
  margin-top: 16px;
}

.esqueci-senha a {
  color: #2563eb;
  font-size: 14px;
  text-decoration: none;
}

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

/* =========================================
   RESPONSIVIDADE - CELULAR
   ========================================= */

@media (max-width: 600px) {
  body {
    padding: 15px;

    /* Evita problemas com teclado virtual */
    align-items: center;
  }

  .login {
    width: 100%;
    max-width: 100%;

    padding: 26px 20px;

    border-radius: 12px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  }

  .titulo-login {
    margin-bottom: 24px;
  }

  .titulo-login h2 {
    font-size: 24px;
  }

  .linha {
    margin-bottom: 16px;
  }

  .linha label {
    font-size: 14px;
  }

  .linha input {
    height: 48px;
    font-size: 16px;
  }

  button[type="submit"] {
    height: 48px;
    font-size: 16px;
  }

  .esqueci-senha {
    margin-top: 18px;
  }

  .esqueci-senha a {
    font-size: 14px;
  }
}

/* =========================================
   CELULARES MUITO PEQUENOS
   ========================================= */

@media (max-width: 360px) {
  body {
    padding: 10px;
  }

  .login {
    padding: 22px 16px;
  }

  .titulo-login h2 {
    font-size: 22px;
  }
}