/* css Index  */ 
     .login-box {
         width: 400px;
     }

     /* Efecto Glassmorphism para la tarjeta */
     .card {
         background: rgba(255, 255, 255, 0.95) !important;
         /* Un poco más sólido para que el borde se note */
         backdrop-filter: blur(10px);

         /* Propiedades de borde */
         border: 1px solid rgba(0, 0, 0, 0.1) !important;
         /* Borde fino y elegante */
         border-radius: 20px !important;
         /* Ajusta este valor a tu gusto */

         /* Sombra para dar profundidad */
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
         overflow: hidden;
         /* Esto asegura que el contenido interno no tape las esquinas redondeadas */
     }

     /* También redondeamos la parte superior (header) si lo usas */
     .card-header {
         border-radius: 20px 20px 0 0 !important;
     }

     #system-logo {
         width: 100px !important;
         height: 100px !important;
        /* border: 3px solid #fff !important; */
         /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
         /* margin-bottom: 10px; */
     }

     .login-logo div {
         color: #ffffff !important;
         font-weight: 1000 !important;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         letter-spacing: -1px;
     }

     .form-control {
         border-radius: 8px !important;
         border: 1px solid #ddd;
         transition: all 0.3s ease;
     }

     .form-control:focus {
         border-color: #007bff;
         box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
     }

     .input-group-text {
         background-color: transparent !important;
         border-radius: 0 8px 8px 0 !important;
         border-left: none;
     }

     .btn-primary {
         border-radius: 8px !important;
         padding: 12px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1px;
         transition: transform 0.2s;
     }

     .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
     }

     /* Estilo para las etiquetas encima de los inputs */
     .login-card-body label {
         font-size: 1.1rem !important;
         /* Aumenta el tamaño del texto */
         font-weight: 600 !important;
         /* Lo hace un poco más negrita */
         color: #333 !important;
         /* Un gris muy oscuro para mejor contraste */
         margin-bottom: 8px;
         /* Espacio entre el texto y el input */
         display: block;
         /* Asegura que ocupe su propia línea */
     }

     .login-box-msg {
         font-size: 1.4rem !important;
         /* Más grande y llamativo */
         color: #2c3e50 !important;
         /* Color azul medianoche profesional */
         font-weight: 700 !important;
         padding: 0 0 5px 0 !important;
     }

     /* Subtexto debajo de "Bienvenido" */
     .welcome-subtext {
         font-size: 0.95rem;
         color: #7f8c8d;
         margin-bottom: 25px;
         display: block;
         text-align: center;
     }

     /* Detalle: Línea decorativa debajo del título */
     .title-separator {
         width: 50px;
         height: 4px;
         background: #007bff;
         /* Color azul de tu sistema */
         margin: 10px auto 20px auto;
         border-radius: 2px;
     }

     /* Detalle de íconos: Que se vean más grandes y suaves */
     .input-group-text span {
         font-size: 1.1rem;
         transition: color 0.3s ease;
     }

     /* Efecto cuando el input está activo: El icono cambia de color */
     .input-group:focus-within .input-group-text span {
         color: #007bff !important;
     }




    /* Agrega esto a tu bloque de CSS para que el botón de la Opción 3 se anime al pasar el mouse */
  /* .btn-outline-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 10px rgba(0,123,255,0.2) !important;
  } */