odal-maxwidth-450 .login-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   position: relative;
   padding: 1rem;
   overflow: hidden;

 }

 .login-card div h1 {
   font-size: 2rem !important;
 }

 .login-card .decorative-wave {
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 100%;
   height: 60px;
   background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23667eea" fill-opacity="0.1" d="M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,128C672,128,768,160,864,160C960,160,1056,128,1152,117.3C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
 }

 .login-card .logo {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   padding: 12px;
   background: linear-gradient(45deg, #667eea, #764ba2);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   animation: float 3s ease-in-out infinite;
 }

 img#imgPerfil {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0 !important;
    margin: 0 !important;
}

 @keyframes float {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 .login-card .google-btn {
   background: #4285f4;
   color: white;
   border-radius: 12px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }




 .login-card .google-btn::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transform: rotate(45deg);
   transition: all 0.5s;
 }




 .login-card .google-btn:hover::before {
   animation: shine 1.5s;
 }


 div#g_id_signin {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
 }


 @keyframes shine {
   0% {
     left: -50%;
   }

   100% {
     left: 150%;
   }
 }

 .login-card .google-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(66, 133, 244, 0.3);
 }

 .login-card .feature-item {
   background: #f8f9fa;
   border-radius: 10px;
 }

 .login-card .time-section {
   background: rgba(102, 126, 234, 0.05);
 }

 .login-card .calendar-icon {
   animation: pulse 2s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.1);
   }
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 /* Específicamente para tu main y sus hijos */
 #main-content,
 #main-content * {
   box-sizing: border-box;
 }

 /*++++++++++++++++++ menu mi perfil++++++++++++++++++++*/


 #profile.container {
   margin: 0 !important;
   padding: 0 !important;
 }

 .sidebar {
   flex: 0 0 50%;
   transition: all 0.3s;
   background-color: rgb(60 167 183 / 64%);
 }

 .sidebar.collapsed {
   width: 50px !important;
   flex: 0 0 50px !important;
 }


 .sidebar.collapsed .nav-link span {
   display: none;
 }

 .sidebar.collapsed .nav-link i {
   margin-right: 0;
 }

 .main-content {
   flex: 0 0 calc(100% - 50px);
   max-width: 100%;
   max-height: 90dvh;
   overflow-y: auto;
 }

 .nav-link.active {
   background-color: #0d6efd !important;
   border-radius: 5px;
   color: white !important;
 }



 /*++++++++++++++++++ estilos de ordenes++++++++++++++++++++*/

 .pedido-card {
   border: 1px solid #e9ecef;
   border-radius: 12px;
   transition: all 0.25s ease;
   background: #b8ad1c;
   margin-bottom: 1rem;
 }

 .pedido-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
 }

 .estado-badge {
   font-size: 0.7rem;
   padding: 0.35rem 0.7rem;
   border-radius: 20px;
   text-transform: uppercase;
   font-weight: 600;
   border: 2px solid white;
   padding: 0 15px;
 }

 .codigo-orden {
   font-family: 'Courier New', monospace;
   font-weight: 700;
   color: #2c3e50;
   font-size: 0.9rem;
   word-break: break-word;
 }

 .detalle-btn {
   background: #4a90e2;
   color: white !important;
   padding: 0.5rem 1rem;
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
   border: none;
   font-size: 0.9rem;
 }

 @media (max-width: 768px) {
   .pedido-card {
     padding: 1rem !important;
   }

   .mobile-grid {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 0.5rem;
     align-items: start;
   }

   .info-group {
     display: grid;
     gap: 0.3rem;
   }

   .tiempos-movil {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
   }

   .detalle-btn {
     width: 100%;
     justify-content: center;
     padding: 0.5rem;
     font-size: 0.85rem;
   }

   .estado-badge {
     font-size: 0.65rem;
     padding: 0.3rem 0.6rem;
   }

   .codigo-orden {
     font-size: 0.85rem;
   }
 }


 /*++++++++++++++++++ estilos de ordenes++++++++++++++++++++*/
 .support-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .support-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .form-control-lg {
   border-radius: 12px;
   padding: 1rem 1.25rem;
 }

 .btn-primary {
   background: #2563eb;
   border: none;
   padding: 1rem 2rem;
   border-radius: 12px;
   font-weight: 500;
 }

 .recaptcha-container {
   min-height: 78px;
 }




 /*Inicio con facebook*/

    .fb-btn {
      background-color: #1877f2;
      color: white;
      font-weight: 600;
      border-radius: 8px;
      transition: background-color 0.3s ease;
    }

    .fb-btn:hover {
      background-color: #145dbf;
    }

    .fb-logo {
      height: 24px;
      margin-right: 10px;
    }


    #facebook-login-btn{
      display: none !important;
    }