/* RESET BÁSICO */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}

/* BODY */
body {
   margin: 0;
   font-family: Arial;
   background: linear-gradient(135deg, #0a2b4f, #1c4d7a);
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

/* CONTENEDOR PRINCIPAL */
.login-container {
   background: #f4f6f8;
   width: 90%;
   max-width: 400px;
   padding: 30px;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.2);
   text-align: center;
   animation: fadeIn 0.5s ease;
}

/* LOGO */
.login-logo {
   width: 250px !important;
   margin-bottom: 20px;
}

/* INPUTS */
.login-input {
   width: 100%;
   padding: 14px;
   margin: 10px 0;
   border-radius: 10px;
   border: 1px solid #ccc;
   font-size: 16px;
   transition: all 0.2s ease;
}

.login-input:focus {
   border-color: #0a2b4f;
   outline: none;
   box-shadow: 0 0 5px rgba(10,43,79,0.3);
}

/* BOTÓN */
.login-btn {
   width: 100%;
   padding: 15px;
   margin-top: 15px;
   border: none;
   border-radius: 10px;
   background: #0a2b4f;
   color: white;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.2s ease;
}

.login-btn:hover {
   background: #133a66;
}

.login-btn:active {
   transform: scale(0.98);
}

/* ANIMACIÓN */
@keyframes fadeIn 
{
   from 
   {
      opacity: 0;
      transform: translateY(10px);
   }
   to 
   {
      opacity: 1;
      transform: translateY(0);
   }
}

/* TABLET */
@media (min-width: 768px) 
{
   .login-container 
   {
      max-width: 420px;
   }
}

/* ESCRITORIO */
@media (min-width: 1024px) 
{
   .login-container 
   {
      max-width: 450px;
   }
}