.campo-password { 
    margin-bottom: 10px; 
}

.mostrar-pass { 
    font-size: 0.8em; 
    cursor: pointer; 
}

body {
    background-image: url('https://i.pinimg.com/originals/bb/21/31/bb2131506091b34bccf419a73b0286df.gif');
    background-size: cover;       /* Hace que el GIF cubra toda la pantalla */
    background-repeat: no-repeat; /* Evita que el GIF se repita en mosaico */
    background-attachment: fixed; /* Mantiene el fondo quieto al hacer scroll */
    background-position: center;  /* Centra el GIF */

    /* Para centrar el formulario en la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;

    /* Para centrar el formulario en la pantalla */ 
    font-family: Arial, sans-serif;
}

h2 {
    color: #99a151;
}

label {
    color: #ffffff;
    font-weight: bold;
}
input{
    width: 300px;
}

.inputs_registro {
 margin-bottom: 15px;
}


.registrousuario_comic{
   /* Color gris oscuro con 60% de transparencia */
    background-color: rgba(52, 58, 64, 0.1) !important; 
    
    /* Efecto de desenfoque para que se vea tipo cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes redondeados y margen para que no toque las orillas */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Hacemos que sea "flaco" y centrado */
    width: 350px;
    height: 425px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;

}

.registrousuario_comic h2 {
    color: #ffffff;
    font-weight: bold;
}


/* Seleccionamos la clase que ya tienes en el HTML */
.login-comic {
    /* Color gris oscuro con 60% de transparencia */
    background-color: rgba(52, 58, 64, 0.1) !important; 
    
    /* Efecto de desenfoque para que se vea tipo cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes redondeados y margen para que no toque las orillas */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Hacemos que sea "flaco" y centrado */
    width: 350px;
    height: 350px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para que el título h2 sea blanco y resalte sobre el gris */
.login-comic h2 {
    color: #ffffff;
    font-weight: bold;
}

.checkbox-group {
    display: flex;          /* Activa el modo flexible */
    align-items: center;    /* Alinea el cuadrito y el texto verticalmente */
    justify-content: center; /* Centra ambos elementos horizontalmente */
    gap: 10px;              /* Da un espacio pequeño entre el cuadrito y el texto */
    margin-top: 10px;       /* Separa el checkbox del input de arriba */
    color: white;           /* Para que el texto se vea bien */
}

/* IMPORTANTE: Esto evita que el checkbox herede el ancho 100% de tus otros inputs */
.checkbox-group input[type="checkbox"] {
    width: auto !important; 
    margin: 0;
    cursor: pointer;
}

.checkbox-group label {
    cursor: pointer;
    margin: 0;
    font-size: 0.9em;
}