/* Estilos para la página de login */
.login-options {
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin-bottom: 30px;
}

.login-option-btn {
   padding: 20px;
   border: 2px solid #e0e0e0;
   border-radius: 12px;
   background: white;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   font-size: 16px;
   font-weight: 500;
   color: #333;
   text-decoration: none;
   position: relative;
   overflow: hidden;
}

.login-option-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0,0,0,0.1);
   border-color: #ff6b35;
   color: #333;
   text-decoration: none;
}

.login-option-btn.google {
   background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.login-option-btn.google:hover {
   border-color: #4285f4;
}

.login-option-btn.email {
   background: linear-gradient(135deg, #ff6b35 0%, #38a169 100%);
   color: white;
}

.login-option-btn.email:hover {
   color: white;
   transform: translateY(-2px) scale(1.02);
}

.login-option-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
   transition: left 0.5s;
}

.login-option-btn:hover::before {
   left: 100%;
}

.option-icon {
   font-size: 24px;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.login-form-container {
   display: none;
   animation: slideDown 0.3s ease-out;
}

.login-form-container.show {
   display: block;
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.back-to-options {
   background: none;
   border: none;
   color: #ff6b35;
   font-size: 14px;
   cursor: pointer;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.3s ease;
}

.back-to-options:hover {
   color: #38a169;
}

.form-title {
   text-align: center;
   color: #333;
   margin-bottom: 25px;
   font-size: 24px;
   font-weight: 600;
}

.password-container {
   position: relative;
}

.password-toggle {
   position: absolute;
   right: 12px;
   top: 40%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   color: #666;
   font-size: 18px;
   padding: 5px;
   border-radius: 50%;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
}

.password-toggle:hover {
   background: #f0f0f0;
   color: #ff6b35;
}

.welcome-message {
   text-align: center;
   margin-bottom: 30px;
   color: #666;
   font-size: 16px;
}

.divider {
   text-align: center;
   margin: 30px 0;
   position: relative;
   color: #999;
   font-size: 14px;
}

.divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   background: #e0e0e0;
}

.divider span {
   background: white;
   padding: 0 15px;
   position: relative;
   z-index: 1;
}

@media (max-width: 768px) {
   .login-option-btn {
      padding: 15px;
      font-size: 14px;
   }
   
   .option-icon {
      font-size: 20px;
      width: 25px;
      height: 25px;
   }
}