:root {
      --color-principal: #9d2148;
      --color-verde-bubble: #235B4E;
    }

    body {
      background: url('https://app.unisa.cdmx.gob.mx/SIGU-U/DEV/titulacion/recursos/unisa_fondo.jpeg') no-repeat center center fixed;
      background-size: cover;
      backdrop-filter: blur(5px);
      min-height: 100vh;
      font-family: 'Roboto', sans-serif;
      color: var(--color-principal);
      display: flex;
      flex-direction: column;
    }

    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .navbar {
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 0.6rem;
    }

    .login-container {
      background: white;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      padding: 1.7rem;
      max-width: 400px;
      margin: 1.5rem auto;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease-out forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    h1,
    h5,
    label,
    .text-danger,
    p {
      color: var(--color-principal) !important;
    }

    .login-title {
      font-weight: bold;
      font-size: 1.2rem;
    }

    .btn-custom {
      background-color: var(--color-principal);
      color: white;
      font-size: 0.95rem;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .btn-custom:hover {
      background-color: #801737;
    }

    .form-control {
      border-radius: 10px;
      font-size: 0.9rem;
    }

    .form-control::placeholder {
      color: #888;
      font-size: 0.9rem;
    }

    .floating-help {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999;
    }

    .help-icon {
      background-color: var(--color-verde-bubble);
      color: white;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s ease;
    }

    .help-icon:hover {
      background-color: #1b473d;
    }

    .help-bubble {
      background: var(--color-verde-bubble);
      color: white;
      padding: 0.8rem;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 55px;
      right: 0;
      width: 260px;
      font-size: 0.85rem;
      display: none;
    }

    footer {
      background-color: var(--color-principal);
      color: white;
      padding: 20px 0 10px;
      font-size: 0.8rem;
      line-height: 1.3;
    }

    footer a,
    footer p,
    footer i {
      color: #ffffff !important;
    }

    footer a:hover {
      color: #f2f2f2 !important;
      text-decoration: underline;
    }

    footer .social-links a {
      margin: 0 4px;
    }