@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --color-primary: #223c57; --white: #ffffff; --muted: #555; } /* RESET */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans-serif; } html, body { height: 100%; } /* BODY: fondo blanco, sin scroll en desktop */ body { background: var(--white); display: flex; min-height: 100vh; overflow: hidden; } /* CONTENEDORES */ .left { width: 40%; min-width: 320px; background-color: var(--color-primary); display: flex; align-items: center; justify-content: center; padding: 1rem; } .left-img { max-width: 85%; max-height: 70%; height: auto; object-fit: contain; display: block; } .right { width: 60%; display: flex; flex-direction: column; background: var(--white); } .top { padding-top: 2.75rem; display: flex; justify-content: center; align-items: flex-start; } .crm-title { color: var(--color-primary); font-weight: 600; font-size: 1.15rem; margin: 0; } /* FORM */ .forms { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .login { width: 100%; max-width: 360px; text-align: center; } /* Aumentar ancho en pantallas anchas */ @media (min-width: 768px) { .login { max-width: 480px; } } @media (min-width: 1200px) { .login { max-width: 560px; } } .welcome-message { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.25rem; } .login-description { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.25rem; } .input-container input { border-radius: 0.35rem; height: 2.6rem; padding: 0.45rem 0.8rem; border: 1px solid #ccc; font-weight: 500; font-size: 0.95rem; } .btn-primary { background-color: var(--color-primary); border: none; color: var(--white); border-radius: 0.35rem; height: 2.6rem; font-weight: 600; } .btn-primary:hover { background-color: #1a2f45; } /* Opción para ocultar la columna izquierda si la agregas al : class="no-left-logo" */ .no-left-logo .left { display: none; } .no-left-logo .right { width: 100%; } /* Responsive: en móviles permitir scroll y ocultar la columna izquierda */ @media (max-width: 768px) { body { overflow: auto; } .left { display: none; } .right { width: 100%; } .forms { padding: 2rem 1rem; } .login { max-width: 480px; margin: 0 auto; } .welcome-message { font-size: 1.6rem; } .top { padding-top: 1.25rem; } }