/*El elemento contiene todo el contenido visible de una página web. Es decir, todo lo que el usuario ve y con lo que puede interactuar.*/ html, body { margin: 0; padding: 0; overflow-x: hidden; /* elimina scroll horizontal */ overflow-y: hidden; /* elimina scroll vertical */ } body { background-image: url('../IMG/fondoo.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Logos */ #dv { position: absolute; top: 10px; left: 20px; width: 75px; z-index: 1; } #sena { position: absolute; top: 10px; right: 20px; width: 75px; z-index: 1; } /* Título */ .ds { color: #000; font-family: "Oswald"; font-size: 90px; font-weight: 500; text-align: center; position: absolute; top: 80px; left: 71%; transform: translateX(-50%); margin: 0; line-height: 100px; transition: transform 0.2s, background-color 0.3s; } #icon { position: absolute; top: 8%; right: 780px; width: 580px; z-index: 1; } /* Caja del login */ #cuenta { position: fixed; top: 400px; right: -200px; transform: translate(-50%, -50%); margin: auto; width: 600px; height: 420px; background-color: white; padding: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* sombra más suave */ border-radius: 10px; z-index: 1000; box-sizing: border-box; } /* Icono de ayuda */ .ayuda { width: 35px; left: 555px; position: absolute; bottom: 20px; cursor: pointer; } #help { background: none; border: none; padding: 0; cursor: pointer; } /* Texto "Iniciar Sesión" */ .ins { color: #000; font-family: "Outfit"; font-size: 30px; font-weight: 400; text-align: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; line-height: 100px; } /* Formulario */ .form-container { font-family: "Outfit", sans-serif; position: absolute; top: 98px; left: 145px; width: 300px; } .login-form { display: flex; flex-direction: column; gap: 15px; } .form-label { font-size: 18px; font-weight: 500; color: #222; } .form-input { padding: 10px 15px; border: 2px solid #444; border-radius: 12px; font-size: 16px; outline: none; transition: all 0.3s ease; } .form-input:focus { border-color: #666; box-shadow: 0 0 8px rgba(0,0,0,0.3); transform: scale(1.03); } /* Botón */ .form-btn { margin-top: 10px; padding: 12px; border: none; border-radius: 12px; background: linear-gradient(135deg, #444, #222); /* degradado */ color: white; font-size: 18px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .form-btn:hover { background: linear-gradient(135deg, #555, #333); transform: scale(1.05); } /* Contenedor de la contraseña */ .password-container { position: relative; } /* Wrapper para input + ojito */ .input-wrapper { position: relative; display: flex; align-items: center; } /* Ajusta el input para dejar espacio al ojito */ .input-wrapper .form-input { width: 100%; padding-right: 40px; /* espacio para el ojito */ } /* Ojito (icono toggle) */ .toggle-password { position: absolute; right: 12px; font-size: 20px; color: #444; cursor: pointer; user-select: none; transition: color 0.3s ease; } .toggle-password:hover { color: #000; /* se pone más oscuro al pasar el mouse */ } #error-msg { color: #ff6363; /* rojo pastel clarito */ font-weight: 600; font-size: 16px; margin-bottom: 8px; /* separa un poco del input */ display: none; /* inicialmente oculto */ } /* =============================== MEDIA QUERIES RESPONSIVE =============================== */ /* Extra pequeños (celulares en vertical, menos de 576px) */ @media (max-width: 575.98px) { .ds { font-size: 40px; top: 60px; left: 50%; } #icon { width: 250px; right: 50%; top: 120px; transform: translateX(50%); } #cuenta { width: 90%; height: auto; top: 350px; right: 50%; transform: translate(50%, -50%); } .form-container { width: 90%; left: 50%; transform: translateX(-50%); } .ayuda { width: 25px; left: auto; right: 10px; } } /* Pequeños (celulares grandes y tablets pequeñas, entre 576px y 768px) */ @media (min-width: 576px) and (max-width: 767.98px) { .ds { font-size: 55px; top: 70px; left: 50%; } #icon { width: 350px; right: 50%; top: 130px; transform: translateX(50%); } #cuenta { width: 80%; height: auto; top: 380px; right: 50%; transform: translate(50%, -50%); } .form-container { width: 80%; left: 50%; transform: translateX(-50%); } } /* Medianos (tablets en horizontal y laptops pequeñas, entre 768px y 992px) */ @media (min-width: 1080px) and (max-width: 1366px) { .ds { font-size: 750%; top: 7%; left: 70%; } #icon { top: 8%; left: 2%; width: 43%; } #cuenta { width: 44%; height: 65%; top: 60%; right: -13.5%; } .form-container { top: 26%; left: 50%; width: 57%; transform: translateX(-50%); } } /* Grandes (laptops y PCs, 1080px o más) */ @media (min-width: 1367px) { .ds { font-size: 123px; top: 80px; left: 70.4%; } #icon { top: 18%; left:5%; width: 650px; } #cuenta { width: 600px; height: 420px; top: 470px; left: 61%; } .form-container { top: 98px; left: 145px; width: 300px; } }