@font-face {
        font-family: 'Futura PT';
        src: url('/nido/assets/fonts/FuturaCyrillicBold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        
    }

    body {
        display: flex;
        height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        
    }

    /* Dividir la pantalla */
    .left-side, .right-side {
        flex: 1;
        position: relative;
    }

    .left-side {
        background: transparent; /* Vacío, o aquí puedes luego poner imagen o color */
        display:none;
    }

    .right-side {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
    max-width: 700px; /* 👈 Nuevo límite de ancho */
    width: 100%;
    margin-left: auto; /* 👈 Centrar a la derecha */
    margin-right: 0;
}


    /* Canvas de partículas */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* ¡Aquí está el nuevo degradado! 
    Va desde la esquina superior izquierda (#004b84) 
    a la esquina inferior derecha (#41e5f2).
  */
  background: linear-gradient(to bottom right, #004b84, #41e5f2);

  /* --- OTRAS OPCIONES ---
    
    Si prefieres un degradado de arriba hacia abajo:
    background: linear-gradient(to bottom, #004b84, #41e5f2);

    Si prefieres un degradado radial (del centro hacia afuera):
    background: radial-gradient(circle, #41e5f2, #004b84);
  */
  
  background-size: cover; /* Esto es bueno mantenerlo */
  overflow: hidden;
  z-index: -1; /* Para que no tape el contenido */
}
    

    /* Contenedor del login */
    .login-container {
        background: #fff /*#222629*/;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        text-align: center;
        max-width: 400px;
        width: 100%;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(5px);
        margin: 20px;
    }

    .input-group {
        margin-bottom: 20px;
        text-align: left;
    }

    .input-group label {
        font-size: 15px;
        color: #14598d;
        font-weight: 500;
    }

    .input-group input {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        margin-top: 6px;
        transition: border 0.3s ease-in-out;
        font-family: 'Poppins', Sans-Serif;
    }

    .input-group input:focus {
        border-color: #5A9BF6;
        outline: none;
    }

    .error-message {
        color: red;
        font-size: 14px;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .login-button {
        width: 100%;
        background: #41e5f2;
        border: none;
        padding: 12px;
        border-radius: 8px;
        color: #14598d;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }

    .login-button:hover {
        background: #14598d;
        color: #fff;
    }

    .forgot-password {
        margin-top: 15px;
        font-size: 14px;
        color: #000;
        
    }

    .forgot-password a {
        color: #14598d;
        text-decoration: none;
        font-weight: 600;
        
    }

    .forgot-password a:hover {
        text-decoration: underline;
    }

    #title_login {
        font-family: "Futura PT", Sans-Serif;
        font-size: 16px;
        color: #222629;
    }

    #iniciar_sesion {
        font-size: 20px;
        color: #14598d;
        font-weight: 700;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .fa-solid {
        margin-right: 5px;
        color: #14598d;
        font-size: 12px;
        position: relative;
    }
    
    #powered_by {
        font-family: 'Poppins', Sans-Serif;
        font-size: 10px;
        text-transform: uppercase;
        
    }
    
    .powered_by {
        display: flex;
        flex-direction: row;
        gap: 4px;
        justify-content: center;
        align-items: baseline;
        margin-top:24px;
    }
    
    #logo_ {
        width: 30%;
        max-width: 60%;
    }