* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Contenedor a pantalla completa y centrado */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;         /* pantalla completa */
  background-color: #DEDBD2; /* color de fondo */
  padding: 16px;
}

/* Tarjeta/formulario */
.loginForm {
  background-color: #fff3b0;
  width: 100%;
  max-width: 340px;
  padding: 32px 28px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Título dentro del formulario */
.loginForm h2 {
  font-family: 'Anta', 'Exo', sans-serif;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #000;
  text-align: center;
}

/* Filas del formulario */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-weight: 500;
  font-size: 14px;
  color: #1d1d1f;
}

/* Inputs */
.loginForm input[type="text"],
.loginForm input[type="password"] {
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  outline: none;
}

/* Botón (usas <button>, no input) */
.submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  background-color: #000;
  color: #ada892;
  transition: transform .04s ease, opacity .2s ease, background-color .2s ease;
}

.submit-btn:hover { background-color: #333; }
.submit-btn:active { transform: translateY(1px); opacity: .9; }

a{
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #333;
}

.msg {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}

/* Mensaje de éxito: VERDECITO BONITO */
.msg-ok {
    background-color: #d1f7d6;   /* fondo verde clarito */
    border: 1px solid #2ecc71;   /* borde verde más fuerte */
    color: #1e7e34;              /* texto verde oscuro */
    font-weight: 500;
}

/* Mensaje de error: rojo */
.msg-error {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-weight: 500;
}