/* Este archivo es exclusivo para el estilo de Microsoft */
@import url("https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600&display=swap");

:root {
  --microsoft-blue: #0067b8;
  --text-color: #1b1b1b;
  --label-color: #666;
  --body-font: "Segoe UI", -apple-system, sans-serif;
}

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

body { font-family: var(--body-font); color: var(--text-color); margin: 0; }

.login { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; }

.login--image { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.login--form { position: relative; background-color: #fff; padding: 44px; width: 440px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

.login--content { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }

.login-box { position: relative; margin-bottom: 24px; }

.login-input { width: 100%; height: 36px; padding: 6px 10px; border: 1px solid #666; font-size: 15px; outline: none; }

.login-input:focus { border: 2px solid var(--microsoft-blue); padding: 5px 9px; }

.login--input-label { position: absolute; left: 10px; top: 8px; color: var(--label-color); font-size: 15px; pointer-events: none; transition: 0.2s ease all; background: white; padding: 0 4px; }

.login-input:focus + .login--input-label,
.login-input:not(:placeholder-shown) + .login--input-label { top: -14px; left: 0; font-size: 12px; color: var(--text-color); }

.login--eye { position: absolute; right: 10px; top: 10px; cursor: pointer; color: #666; }

.login--button { background-color: var(--microsoft-blue); color: #fff; border: none; padding: 6px 18px; font-size: 15px; cursor: pointer; margin-top: 20px; font-weight: 600; min-width: 108px; height: 32px; float: right; }

.login--button:hover { background-color: #005da6; }