/* Pantalla de inicio de sesión de MonitorVPS (mismo estilo que el login de managerV2). */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; display: grid; place-items: center; padding: 24px; font: 15px/1.4 "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: #1a2147; background: linear-gradient(160deg, #101536 0%, #172050 55%, #2f45b0 100%); }
.tarjeta { width: min(940px, 100%); min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lado { position: relative; padding: 48px 40px 40px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: radial-gradient(circle at 40% 25%, #27337a 0%, #141a47 45%, #0f1330 100%); }
.lado::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 300px; height: 300px; border-radius: 50%; background: #222f78; opacity: .9; }
.lado > * { position: relative; z-index: 1; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.marca { flex-direction: column; align-items: flex-start; gap: 6px; }
.marca img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.marca span { font-size: 15px; font-weight: 600; color: #d4d9f2; letter-spacing: .4px; }
.lado h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.lado p { margin: 0; color: #d4d9f2; font-size: 15px; }
.lado small { color: #aeb5db; font-size: 12.5px; }
.forma { padding: 64px 52px 40px; display: flex; flex-direction: column; justify-content: center; }
.forma h1 { margin: 0 0 6px; font-size: 28px; color: #121a45; }
.sub { margin: 0 0 26px; color: #66708f; font-size: 14.5px; }
label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 13.5px; color: #121a45; }
input[type=email], input[type=password] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d5daea; border-radius: 8px; font: inherit; color: #1a2147; background: #fff; }
input:focus { outline: none; border-color: #4b64e8; box-shadow: 0 0 0 3px rgba(75, 100, 232, .25); }
button { margin-top: 26px; width: 100%; height: 42px; border: 0; border-radius: 8px; background: #3f5be0; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #3550cf; }
.error { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; background: #fdecee; color: #a4202b; border: 1px solid #f4c3c8; font-size: 14px; }
.nota { margin: 14px 0 0; font-size: 12.5px; color: #7b84a3; }
@media (max-width: 760px) { .tarjeta { grid-template-columns: 1fr; } .lado { display: none; } .forma { padding: 40px 28px; } }