:root {
      
      --gris-claro: #f7f7f7; /* var(--gris-claro) */
      --gris-medio: #ECECEC; /* var(--gris-medio) */
      --gris-oscuro: #A9A9A9; /* var(--gris-oscuro) */

      --rojo-claro: #FFBFBF; /* var(--rojo-claro) */
      --rojo-medio: #FF6767; /* var(--rojo-medio) */

    }

.btn-mod {
	display:none;
}


  .btn-mod-show,  {
 		display: block;
 }



#logeo {
	display:flex;
	align-items: center
}
    #tituloapi {
    	display: flex;
    	flex-direction: column; 
    	justify-content: center;
    	align-items: center;
    }

    #login {
		text-align: center;
		width: 200px;
        height: 250px;
        
        padding: 10px 30px;
        border-radius: 20px;
        background-color: var(--gris-medio);
	}

	#form-login {
		display: grid;
    	gap: 5px;
    	justify-items: center;
	}
	
	#submit {
		outline: none;
		border-radius: 10px;	
		width: 100%;							  
	}

	#submit:hover {
		outline: none;
		border-radius: 10px;	
		width: 100%;
		box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);					
		transform: scale(1.05);
		transition: all 0.5s ease-in-out;
		background-color: var(--rojo-claro);
		cursor:pointer;			  
	}

    input {
        border-width: 1px;
        border-radius: 10px;
        font-family: Open Sans, sans-serif;
        font-size: 15px;
        width: 65%;
        text-align: center;     
    }

    input#submit {
        font-weight: bold;
    }


.sidebar button:hover {
						

					}
					
					.sidebar button:focus {
						outline: none;
						border-radius: 10px;
						background-color: var(--rojo-claro);
						
					}